Cosa sono i selettori CSS

Premessa

I selettori CSS permettono di determinare gli elementi HTML a cui deve essere applicato un certo gruppo di regole di stile.

Nel novembre 2018 il Consorzio W3C ha emesso la Raccomandazione Selectors Level 3 (di seguito CSS3). Non tutti i browser si sono adeguati prontamente alle innovazioni introdotte con questa raccomandazione. Per un elenco delle compatibilità tra browser e regole, vedere il sito https://caniuse.com/?search=css%20selectors.

Se si vuole che un documento HTML che utilizza selettori CSS3 sia accessibile anche per le versioni da 6 a 8 del browser Internet Explorer, è possibile implementare nel documento la libreria javascript selectivizr.

Tabella di sintesi

Nella tabella sotto riportata sono indicati:

• Il nome o la categoria del selettore
• l’indicatore di selettore introdotto con le specifiche CSS3
• la sintassi del selettore
• la specificità del selettore
• una breve descrizione

Nome	css3	Sintassi	Peso	Descrizione
Selettore universale		*	0	Seleziona tutti gli elementi HTML presenti nel documento
Selettore di tipo		E	1	Seleziona tutti gli elementi HTML di tipo E (dove E rappresenta un qualunque elemento HTML: body, div, li, p, ecc.)
Selettori d’attributo		E[att]	10	Seleziona gli elementi E che hanno un attributo att, indipendentemente dal valore assunto dall’attributo
		E[att="val"]	10	Seleziona gli elementi E che hanno un attributo att esattamente uguale a “val”.
		E[att~="val"]	10	Seleziona gli elementi E che hanno un attributo att il cui valore è dato da una lista di termini separati da spazi, di cui uno è esattamente uguale a “val” (es. class=”va  val valor”)
		E[att^="val"]	10	Seleziona gli elementi E che hanno un attributo att il cui valore inizia con il testo “val”
		E[att$="val"]	10	Seleziona gli elementi E che hanno un attributo att  il cui valore termina con il testo “val”
		E[att*="val"]	10	Seleziona gli elementi E che hanno un attributo att il cui valore contiene il testo “val” (es. “avvalorare”)
		E[att|="val"]	10	Seleziona gli elementi E che hanno un attributo att il cui valore è dato da una lista di termini tra i quali è è presente il testo “val”, oppure il testo “val” seguito da un trattino e ulteriore testo (“val-xxxx”)
Selettore Id		#val	100	Seleziona l’elemento E il cui attributo id ha valore “val”. Equivale a: E[id="val"]
Selettore Class		.val	10	Seleziona gli elementi E il cui attributo class ha un valore che contiene uno o più termini, tra i quali è presente “val”. Equivale a: E[class~="val"]
Pseudo classi		E:link	10	Seleziona gli elementi E  costituiti da link non ancora visitati
		E:visited	10	Seleziona gli elementi E  costituiti da link già visitati
		E:enabled	10	Seleziona gli elementi E  abilitati
		E:disabled	10	Seleziona gli elementi E  disabilitati
		E:checked	10	Seleziona gli input radio o input checkbox spuntati
Pseudo classi dinamiche		E:hover	10	Seleziona l’elemento E sul quale è posizionato il mouse
		E:focus	10	Seleziona l’elemento E che riceve il focus
		E:active	10	Seleziona l’elemento E su cui è stato fatto Click con il mouse
Pseudo classi strutturali		:root	10	Seleziona l’elemento HTML, svolge la stessa funzione del selettore HTML, ma ha peso 10 invece che 1
		E:first-child	10	Seleziona il primo elemento E tra i figli
		E:nth-child(an+b)	10	Seleziona l’elemento E figlio (an+b)esimo, partendo dal primo figlio
		E:nth-last-child(an+b)	10	Seleziona l’elemento E figlio (an+b)esimo, partendo dall’ultimo figlio
		E:nth-of-type(an+b)	10	Seleziona l’elemento E figlio (an+b)esimo, dal primo, dello stesso tipo
		E:nth-last-of-type(an+b)	10	Seleziona l’elemento E figlio (an+b)esimo, dall’ ultimo, dello stesso tipo
		E:last-child	10	Seleziona l’ultimo figlio E
		E:only-child	10	Seleziona l’unico figlio E
		E:first-of-type	10	Seleziona il primo figlio E, tra tutti i figli E
		E:last-of-type	10	Seleziona l’ultimo figlio E, tra tutti i figli E
		E:only-of-type	10	Seleziona l’unico figlio E, tra tutti i figli E
		E:empty	10	Seleziona tutti gli elementi E vuoti (es. <p></p>)
		A:not(B)	—	Seleziona tutti gli elementi A, esclusi quelli corrispondenti al parametro B
Pseudo-elementi (1)		E:first-line	1	Seleziona la prima riga di un testo
		E:first-letter	1	Seleziona il primo carattere di un testo
		E:before	1	Aggiunge contenuti prima
		E:after	1	Aggiunge contenuti dopo
Combinatori		A B		Combinatore di discendenza (descendant): B contenuto in A, a qualsiasi sotto livello
		A>B		Combinatore figlio (child): B direttamente contenuto in A
		A+B		Combinatore di adiacenza (next-sibling): Seleziona gli elementi  B immediatamente successivi al fratello A
		A~B		Combinatore di precedenza (subsequent sibling): Seleziona gli elementi B successivi (anche non immediatamente) al fratello A
Gruppo di selettori		A, B, ...		Seleziona tutti gli elementi A, tutti gli elementi B, ecc.

⁽¹⁾ Le specifiche CSS3 invitano ad usare la sintassi :: per differenziare pseudo-elementi da pseudo-classi. Tuttavia, poiché le versioni di Internet Explorer fino alla 8 compresa non supportato la sintassi ::  è preferibile usare quella con singolo carattere : per garantire la compatibilità anche con questi browser.

Risorse in rete

• Raccomandazione W3C aggiornata al 6/11/2018: Selectors Level 3.
• Raccomandazione W3C aggiornata al 6/11/2018, capitolo 9: “Calcolo della specificità di un selettore” (Calculating a selector’s specificity).