Se avete appena iniziato con i CSS, è bene avere una comprensione fondamentale di ciò che si intende quando ci riferiscono ai selettori CSS. In questo post farò una breve descrizione dei più noti selettori CSS insieme ad alcuni esempi.

Selettori di Base

Un “selettore” è l’istruzione in un set di regole CSS che indica al browser quali sono gli elementi da ‘selezionare’ per lo styling. Guarda i due esempi che seguono:
[code lang=”css”] <style type="text/css">
.box {
background-color: aqua;
}

form textarea {
background: color: purple;
}
</style>
[/code]

In ciascuno di questi esempi, il selettore è la parte del set di regole che appare prima della parentesi graffa aperta. “.box” è il primo selettore e “form textarea” è il secondo selettore.
Selettore universale
Questo selettore è costituito dal carattere asterisco, come in questo esempio:
[code lang=”css”] <style type="text/css">
* {
background-color: aqua;
}
</style>
[/code]
Quando è usato da solo come sopra, seleziona ogni elemento della pagina.
Selettore per tipo
Chiamato anche “type selector”, questo selettore seleziona gli elementi HTML in base al nome del tag. Due esempi:
[code lang=”css”] <style type="text/css">
h3 {
background-color: silver;
}

div {
background-color: teal;
}
</style>
[/code]

Selettore per classe
Questo seleziona l’elemento che corrisponde al nome della classe definita con un attributo class nel codice HTML.
[code lang=”css”] <style type="text/css">
.elemento {
background-color: teal;
}
</style>
[/code]
Questo è il mio selectore preferito e tutti gli sviluppatori CSS dovrebbero usarlo abbondantemente. È possibile inserire più classi separate da spazi su un singolo attributo di classe, il che rende questo selettore abbastanza potente.
Selettore per ID
Questo seleziona un elemento che corrisponde a un id definito come attributo id nel codice HTML.
[code lang=”css”] <style type="text/css">
#elemento {
background-color: teal;
}
</style>
[/code]
Selettori per attributi
Questo selettore seleziona un elemento basato su un attributo HTML e/o il valore dell’attributo. Entrambi gli esempi che seguono sono selettori di attributo validi.
[code lang=”css”] <style type="text/css">
div[style] {
background-color: teal;
}

input[type="text"] {
background-color: teal;
}
</style>
[/code]

Il primo esempio seleziona ogni elemento <div> che ha un attributo “style”. Il secondo esempio seleziona ogni elemento <input> che ha un attributo “type” con il valore “text”.
Selettori Speciali
Selettore per discendenti
Questo selettore viene definito con un carattere di spazio che separa i due selettori e rappresenta un elemento figlio, ma non solo i figli immediati, anche quelli annidati sotto.
[code lang=”css”] <style type="text/css">
.padre .figlio {
background-color: teal;
}
</style>
[/code]
Selettori per figli
Questo seleziona un elemento figlio immediato contenuto da un elemento padre.
[code lang=”css”] <style type="text/css">
.padre > .figlio {
background-color: teal;
}
</style>
[/code]
Quindi lo stile “.figlio” non si applicherà agli elementi che non siano figli immediati dell’elemento “.padre”. Non può essere annidato all’interno di un altro elemento, deve essere un elemento figlio immediato. E solo ai figli che si applicherà lo stile e non al padre.
Selettori fratelli adiacenti
Questo selettore, che utilizza il segno più, si rivolge a tutti gli elementi che sono “adiacenti” gli uni agli altri, detti anche fratelli immediati, e devono avere lo stesso elemento padre.
[code lang=”css”] <style type="text/css">
h2+p {
background-color: teal;
}
</style>
[/code]
Selettori fratelli generale
Questa regola utilizza il carattere tilde ed fa esattamente lo stesso del selettore fratelli adiacenti ad eccezione che gli elementi non devono essere fratelli immediati.
[code lang=”css”] <style type="text/css">
h2~p {
background-color: teal;
}
</style>
[/code]
Pseudo classi
Anche se tecnicamente rientrano nella categoria dei “selettori”, questi non sono normalmente denominati “selettori”, ma solo pseudo-classi. Si tratta di un “selettore” di un elemento basato sul suo stato. Ecco alcuni esempi:
[code lang=”css”] <style type="text/css">
a:visited {
background-color: teal;
}

input:focus {
background-color: teal;
}
</style>
[/code]

Pseudo Elementi
Anche in questo caso non è normalmente indicato come un “selettore”, questi rappresentano in realtà gli elementi della pagina HTML che non sono realmente parte del rendering HTML:
[code lang=”css”] <style type="text/css">
p:first-letter {
background-color: teal;
}

p:before {
content: "";
background-color: teal;
}
</style>
[/code]

Gli pseudo-elementi “:before” e “:after” sono unici da altri pseudo-elementi, nel senso che deve essere utilizzato insieme con la proprietà di content.