Selettori, pseudo-classi e pseudo-elementi in CSS3

I selettori sono schemi (pattern) utilizzati nei fogli di stile per selezionare gli elementi a cui si vuole applicare uno stile. Nella guida CSS di base abbiamo già affrontato l’argomento spiegando dettagliatamente cos’è un selettore e quali sono i principali tipi di selettori supportati da CSS.

Come abbiamo detto nella lezione introduttiva di questa guida, CSS3 ha apportato delle novità in tema di selettori.

Selettori di CSS3

Oltre ai classici selettori per tipo, classe e per ID ne esistono diversi altri, alcuni dei quali già facevano parte delle specifiche di CSS 1 e 2. Riepilogheremo questi ultimi e aggiungeremo i nuovi selettori introdotti da CSS3, in modo da fornire all’utente una panoramica completa degli strumenti di selezione.

Selezionare elementi fratelli e figli

Selettore	Esempio	Descrizione	Livello CSS
elemento A elemento B	div p	seleziona gli elementi B contenuti in un elemento A	1
elemento A > elemento B	div > p	seleziona gli elementi B contenuti direttamente in un elemento A	2
elemento A + elemento B	div + p	seleziona tutti gli elementi B preceduti direttamente da un elemento A	2
elemento A ~ elemento B	img ~ a	seleziona tutti gli elementi B preceduti da un elemento A anche non direttamente	3

Selezionare in base all’attributo

Selettore	Esempio	Descrizione	Livello CSS
[attibuto]	[target]	seleziona gli elementi che dispongono di un dato attributo	2
[attributo=valore]	[target=_blank]	seleziona tutti gli elementi che hanno un determinato valore per uno specifico attributo	2
[attributo=~testo]	[scr~=immagine]	seleziona tutti gli elementi che contengono un determinato testo nel valore di uno specifico attributo	2
[attributo^=testo]	[href^=http]	seleziona tuti gli elementi in cui il valore per uno specifico attributo comincia con un dato testo	3
[attributo$=testo]	[src$=gif]	seleziona tuti gli elementi in cui il valore per uno specifico attributo termina con un dato testo	3
[attributo*=testo]	[src*=grande]	seleziona tuti gli elementi in cui il valore per uno specifico attributo contiene un dato testo	3

Pseudo-classi e pseudo-elementi supportati in CSS3

CSS3 ha introdotti rilevanti novità anche nell’ambito delle pseudo-classi e degli pseudo-elementi. Per chi desiderasse approfondire questi concetti, ancora una volta, si rimanda alla lettura della lezione dedicata all’interno della guida base a CSS.

Selezionare i collegamenti

Selettore	Esempio	Descrizione	Livello CSS
:link	a:link	Seleziona tutti i collegamenti non visitati	1
:visited	a:visited	Seleziona tutti i collegamenti visitati	1
:active	a:active	Seleziona tutti i collegamenti attivi	1
:hover	a:hover	Seleziona tutti i collegamenti su si colloca il puntatore del mouse	1

Selezionare gli elementi in base allo stato

Selettore	Esempio	Descrizione	Livello CSS
:focus	input:focus	Seleziona gli elementi che hanno il fuoco	2
:enabled	input:enabled	Seleziona tutti gli elementi attivati	3
:disabled	input:disabled	Seleziona tutti gli elementi disattivati	3
:checked	input:checked	Seleziona tutti gli elementi selezionati (si usa per radio button e checkbox)	3
::selection	::selection	Seleziona la porzione di un elemento (ad esempio un paragrafo di testo) selezionata dall’utente	3

Selezionare gli elementi in base alla posizione e al contenuto

Selettore	Esempio	Descrizione	Livello CSS
:first-letter	p:first-letter	Seleziona la prima lettera di un elemento	1
:first-line	p:first-line	Seleziona la prima riga di un elemento	1
:first-child	p:first-child	Seleziona il primo elemento figlio di un elemento	2
:first-of-type	p:first-of-type	Seleziona il primo elemento di un dato tipo contenuto in elemento padre	3
:last-of-type	p:last-of-type	Seleziona l’ultimo elemento di un dato tipo contenuto in elemento padre	3
:only-of-type	p:only-of-type	Seleziona un elemento se è il solo elemento di quel tipo contenuto in elemento padre	3
:only-child	p:only-child	Seleziona un elemento se è il solo elemento figlio di elemento padre	3
:nth-child(n)	p:nth-child(2)	Seleziona il secondo elemento di un dato tipo di un padre	3
:nth-last-child(n)	p:nth-last-child(2)	Seleziona il secondo elemento di un dato tipo di un padre contando dal fondo	3
:nth-of-type(n)	p:nth-of-type(2)	Seleziona l’ennesimo elemento di un dato tipo contenuto in un elemento padre	3
:last-child	p:last-child	Seleziona un elemento di un dato tipo se è l’ultimo contenuto in un elemento padre	3
:root	:root	Seleziona l’elemento radice del documento	3
:empty	div:empty	Seleziona ogni elemento di un dato tipo che non ha figli	3

Selezionare gli elementi in base a ciò che non sono

Selettore	Esempio	Descrizione	Livello CSS
:not(selettore)	:not(p)	Seleziona tutti gli elementi che non sono un certo selettore	3

Operare su ciò che viene prima o dopo

Selettore	Esempio	Descrizione	Livello CSS
:before	p:before	Inserisce del contenuto prima di ogni elemento di un dato tipo	2
:after	p:after	Inserisce del contenuto dopo ogni elemento di un dato tipo	2