Selettori CSS: una guida pratica con esempi

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.

Comprendere i selettori CSS

Per poter comprendere i diversi selettori, ci aiuteremo con un set di elementi, che graficamente saranno visualizzati come segue

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.

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

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.

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.

Selettori multipli

Facendo uso della virgola, è possibile specificare due selettori diversi.

.IV.special, .c .uno

si ottiene il seguente risultato:

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

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.

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.

Altri articoli riguardo ai selettori CSS

In questo blog sono presenti diversi articoli per approfondire il tema dei selettori CSS.

Ecco i principali:

• Selettore CSS elemento: ottenerlo con Chrome DevTools
• Selettori CSS WordPress: come utilizzarli

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.