Selezionano gli Elementi HTML in base alla relazione che questi hanno con altri Elementi.
Sintassi
<!-- CSS -->
<style>
selettore discendente
selettore > figlio_diretto
selettore + fratello_immediato
selettore ~ fratello_generale
{
<!-- codice -->
}
</style>
<!-- jQuery -->
<script>
$(" selettore discendente ")
$(" selettore > figlio_diretto ")
$(" selettore + fratello_immediato ")
$(" selettore ~ fratello_generale ")
</script>
Selettore di discendenti (spazio)
Il selettore di discendenti, stabilito con uno spazio tra gli elementi, seleziona l’ultimo di questi, discendente dell’immediato suo precedente, che a sua volta potrebbe essere discendente dell’eventuale suo immediato precedente, e così via.
Esempi
<style>
div i {
background-color: yellow;
}
</style>
<div>
<i>Elemento rilevante</i>
<p>Elemento irrilevante</p>
<p>Elemento <i>rilevante</i></p>
</div>
Elemento irrilevante
Elemento rilevante
<script>
$("div i").css("background-color", "yellow");
</script>
<div>
<i>Elemento rilevante</i>
<p>Elemento irrilevante</p>
<p>Elemento <i>rilevante</i></p>
</div>
Elemento irrilevante
Elemento rilevante
Selettore di figli diretti (>)
Il selettore di figli, stabilito con un segno di maggiore (>) tra gli elementi, seleziona il figlio diretto del precedente.
Esempi
<style>
div > span {
background-color: yellow;
}
</style>
<div style="text-align:left !important">
<span>Elemento rilevante</span>
<p>Elemento <span>irrilevante</span></p>
</div>
Elemento irrilevante
<script>
$("div > span").css("background-color", "yellow");
</script>
<div style="text-align:left !important">
<span>Elemento rilevante</span>
<p>Elemento <span>irrilevante</span></p>
</div>
Elemento irrilevante
Selettore di fratelli adiacenti (+)
Il selettore di fratelli adiacenti, stabilito con un segno di più (+) tra gli elementi, seleziona l’ultimo di questi, fratello dell’immediato suo precedente.
Esempi
Selettore generale di fratelli (~)
Il selettore di fratelli adiacenti, stabilito con un segno di tilde (~) tra gli elementi, seleziona l’ultimo di questi, fratello suo precedente anche se non immediatamente precedente allo stesso.
Esempi
Contenuti correlati
- CSS
- HTML
- JavaScript
- jQuery
- PHP
- SQL
- WORDPRESS
0 Comment