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:
Copia codice 

<style type="text/css">
	.box {
		background-color: aqua;
	}
	form textarea {
		background: color: purple;
	}
</style>
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:
Copia codice 

<style type="text/css">
	* {
		background-color: aqua;
	}
</style>
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:
Copia codice 

<style type="text/css">
	h3 {
		background-color: silver;
	}
	div {
		background-color: teal;
	}
</style>
Selettore per classe
⤽
Questo seleziona l’elemento che corrisponde al nome della classe definita con un attributo class nel codice HTML.
Copia codice 

<style type="text/css">
	.elemento {
		background-color: teal;
	}
</style>
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.
Copia codice 

<style type="text/css">
	#elemento {
		background-color: teal;
	}
</style>
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.
Copia codice 

<style type="text/css">
	div[style] {
		background-color: teal;
	}
	input[type="text"] {
		background-color: teal;
	}
</style>
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.
Copia codice 

<style type="text/css">
	.padre .figlio {
		background-color: teal;
	}
</style>
Selettori per figli
⤽
Questo seleziona un elemento figlio immediato contenuto da un elemento padre.
Copia codice 

<style type="text/css">
	.padre > .figlio {
		background-color: teal;
	}
</style>
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.
Copia codice 

<style type="text/css">
	h2+p {
		background-color: teal;
	}
</style>
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.
Copia codice 

<style type="text/css">
	h2~p {
		background-color: teal;
	}
</style>
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:
Copia codice 

<style type="text/css">
	a:visited {
		background-color: teal;
	}
	input:focus {
		background-color: teal;
	}
</style>
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:
Copia codice 

<style type="text/css">
	p:first-letter {
		background-color: teal;
	}
	p:before {
		content: "";
		background-color: teal;
	}
</style>
Gli pseudo-elementi “:before” e “:after” sono unici da altri pseudo-elementi, nel senso che deve essere utilizzato insieme con la proprietà di content.