Funzionamento dei selettori CSS con i simboli > + ~ e alcune pseudo classi
Il metodo più diffuso e facile di selezionare gli elementi HTML è usando classi CSS o ID. Normalmente si selezionano gli elementi figli in modo indiscriminato usando lo spazio, ad esempio “.container p” per selezionare tutti i paragrafi all’interno dell’elemento “container”. Possiamo restringere la selezione usando classi anche per gli elementi figli, ad esempio “.container .evidenziato” seleziona solo gli elementi con classe “evidenziato”. Però, in alcuni casi potremmo non avere la possibilità di manipolare il markup HTML. CSS ci offre qualche strumento per affrontare questi casi specifici.
spazio = seleziona qualsiasi figlio in modo indiscriminato
> = seleziona tutti i figli diretti
+ = seleziona il figlio diretto subito dopo al primo fratello
~ = seleziona tutti i figli diretti dopo al primo fratello
Prendiamo in considerazione questo markup html per fare un esempio pratico, e vedere alcune eccezioni.
<!DOCTYPE html>
<html>
<head>
<style>
body {
padding: 40px;
background-color: lightblue;
}
p {
font-family: verdana;
font-size: 20px;
}
#wrapper{
border:3px solid white;
padding: 10px;
}
#container{
border:3px solid red;
padding: 10px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="container" class="container">
<p>Primo figlio</p>
<div>
<p>Figlio non diretto</p>
</div>
<p>Secondo figlio</p>
<p>Terzo figlio</p>
</div>
</div>
</body>
</html>
In questo modo abbiamo vari elementi all’interno di due contenitori. Il risultato è il seguente.
Partiamo aggiungendo una regola base, e cioè “div p“, in questo modo evidenziamo tutti gli elementi <p>.
div p{
border:3px solid green;
padding: 10px;
}
Il risultato diventa questo.
Otteniamo lo stesso risultato anche se usiamo l’ID dell’elemento parent “#container p” o la sua classe “.container p“. Il selettore può partire da un elemento superiore “#wrapper div p” o “#wrapper .container p“. Nel caso specifico che osserviamo vengono selezionati tutti i paragrafi anche se usiamo “div > p” o “#wrapper div > p“, perché ogni paragrafo è sempre figlio diretto di elementi <div>.
Però, se usiamo “#container > p” oppure “.container > p” allora la regola fa una distinzione, e solo quelli del contenitore sono selezionati. Otteniamo questo risultato.
Con il selettore “div + p” o “#wrapper div + p” selezioniamo solo l’elemento diretto successivo al primo, il risultato è il seguente. Ma attenzione che abbiamo una anomalia: la regola non funziona se usiamo un ID o una classe CSS nel parent, come “#container + p” o “.container + p“, in questo caso nessuno viene selezionato.
Con la tilde il meccanismo è simile, cioè selezioniamo tutti gli elementi dopo al primo con “div ~ p” o “#wrapper div ~ p“. Ma come per l’esempio precedente, la regola smette di funzionare se impostiamo il parent con ID o classe “#container ~ p” o “.container ~ p“.
Con le ultime due regole vediamo che il primo elemento viene sempre escluso, come facciamo a selezionarlo? Possiamo ricorrere alla pseudo classe “:first-child“, quindi selezioniamo tutti i primi elementi con “div p:first-child” o”.container p:first-child” o anche “div > p:first-child“. Il risultato è questo.
Se vogliamo essere più precisi, e selezionare solo il primo paragrafo del contenitore, allora dobbiamo usare “.container > p:first-child“. Per ottenere il risultato seguente.
Alla stessa maniera possiamo usare “:last-child“. Il risultato è chiaramente inverso.
Infine, possiamo usare la pseudo classe “:nth-child()” indicando il numero, ad esempio “.container > :nth-child(3)” per selezionare il secondo paragrafo del contenitore, non possiamo usare “.container > :nth-child(2)” perché il <div> interno conta come secondo elemento figlio. Non possiamo usare nemmeno “.container > p:nth-child(2)” perché la regola sembra ignorare la restrizione sugli elementi “p” e da risultati inconsistenti: con valore 1 seleziona entrambi i paragrafi al primo posto, sia il figlio diretto sia quello nel <div> interno, con 2 non seleziona niente, con 3 seleziona solo il secondo figlio diretto, e con 4 seleziona il terzo.
Articoli correlati
Questo articolo ha 0 commenti