I selettori CSS costituiscono un elemento fondamentale nel campo dello sviluppo web.
Possono essere usati sia per stabilire delle regole grafiche (utilizzando codice CSS), sia per selezionare elementi della pagina web, ad esempio per essere modificati utilizzando JavaScript.
In questa guida vedremo tutti i principali selettori CSS, con l’aiuto di un set sempre uguale di elementi HTML, ai quali verrà applicato un selettore CSS diverso, a seconda dell’esempio proposto.
Indice
Comprendere i selettori CSS
Per poter comprendere i diversi selettori, ci aiuteremo con un set di elementi, che graficamente saranno visualizzati come segue
div.c > p.I
div.c > div.II > p.uno
div.c > p.III
Gli elementi che corrisponderanno al selettore CSS dell’esempio saranno evidenziati dal colore rosso.
<div class="css-selector-container"> <div class="a"> <div class="I"> div.a > div.I</div> <div class="II"> div.a > div.II</div> <div class="III"> div.a > div.III</div> <div class="IV"> div.a > div.IV</div> </div> <div class="b"> <div class="I"> div.b > div.I</div> <div class="II"> div.b > div.II</div> <div class="III"> div.b > div.III</div> <div class="IV special"> div.b > div.IV</div> </div> <div class="c"> <p class="I"> div.c > p.I</p> <div class="II"> <p class="uno"> div.c > div.II > div.uno</p> </div> <p class="III"> div.c > p.III</p> <div class="IV"> div.c > div.IV</div> </div> </div>
Il codice HTML posto qui è quello utilizzato per disegnare i blocchi utilizzati negli esempi.
Il selettore di classe
Attraverso questo selettore, utilizzabile usando la notazione .nome-classe è possibile selezionare tutti gli elementi HTML corrispondenti alla classe indicata dal selettori, senza vincoli di relazione, tipo di tag o attributo.
Ad esempio, utilizzando il selettore
.IV
si selezionano tutti gli elementi con classe IV.
div.c > p.I
div.c > div.II > p.uno
div.c > p.III
Il selettore con ID
Questo selettore funziona analogamente a quello di classe, tranne per il simbolo utilizzato: rispetto al punto viene utilizzato il cancelletto.
#nome-id
Il selettore qui sopra seleziona l’elemento con id nome-id
Il selettore di classe multiplo
Utilizzando questo selettore, potrai selezionare gli elementi che hanno più classi.
La notazione è .nome-classe1.nome-classe2.
Utilizzando questa notazione è possibile selezionare tutti gli elementi che hanno sia nome-classe1 che nome-class2.
Nell’esempio proposto, facendo uso del selettore
.IV.special
si ottiene il seguente risultato
div.c > p.I
div.c > div.II > p.uno
div.c > p.III
Selettore di relazione
Questo selettore permettere di selezionare gli elementi che sono contenuti da altri elementi.
.c .uno
Con il selettore posto qui sopra si effettua la selezione di tutti gli elementi con classe uno che sono contenuti in un elemento con classe c.
div.c > p.I
div.c > div.II > p.uno
div.c > p.III
Selettore per elemento
Questo selettore permette di selezionare elementi sulla base del loro tag.
div
Con il selettore sopra, vengono selezionati tutti gli elementi caratterizzati dal tag div.
div.c > p.I
div.c > div.II > p.uno
div.c > p.III
Selettori multipli
Facendo uso della virgola, è possibile specificare due selettori diversi.
.IV.special, .c .uno
si ottiene il seguente risultato:
div.c > p.I
div.c > div.II > p.uno
div.c > p.III
Selettore di relazione padre-figlio
Utilizzando il simbolo la notazione .classe1 > .classe2 si selezionano gli elementi che hanno la classe classe2 che sono figli di un elemento con classe classe1.
Ricorrendo all’esempio utilizzato in questo articolo
div > p
si ottiene
div.c > p.I
div.c > div.II > p.uno
div.c > p.III
Selettore “dopo di”
Puoi utilizzare il simbolo + per specificare gli elementi che sono posti subito dopo altri elementi specificati da un apposito selettore.
div.II + p
Con il selettore posto qui sopra, vogliamo selezionare tutti gli elementi con tag p che sono posti subito dopo ad elementi div con classe II.
div.c > p.I
div.c > div.II > p.uno
div.c > p.III
Selettore “prima di”
Facendo uso del simbolo ~ puoi selezionare tutti gli elementi
Per spiegare questo selettore conviene partire direttamente dall’esempio:
p.I ~ div
Questo selettore permette di selezionare tutti gli elementi div che hanno lo stesso genitore di p.I e che compaiono dopo p.I.
div.c > p.I
div.c > div.II > p.uno
div.c > p.III
Altri articoli riguardo ai selettori CSS
In questo blog sono presenti diversi articoli per approfondire il tema dei selettori CSS e lo sviluppo di applicazioni web.
Ecco i principali:
- Selettore CSS elemento: ottenerlo con Chrome DevTools
- Selettori CSS WordPress: come utilizzarli
- Come diventare sviluppatore web: guida completa
- Come fare una chiamata AJAX ( GET / POST )
- File JSON: cosa sono, come si utilizzano
- Tutorial HTML
Selettori CSS: sommario
In questo articolo ho illustrato i principali selettori CSS, applicando ciascuno di essi ad un semplice esempio per rendere più facile la visualizzazione dei concetti espressi.