I selettori CSS3 illustrati in dettaglio da Roger Johansson

I selettori CSS3 illustrati in dettaglio da Roger Johansson

La traduzione di uno storico articolo di Roger Johansson.

Nel settembre e nell'ottobre 2005 ho pubblicato una serie di articoli che illustravano i selettori disponibili nei CSS 2.1. In breve, l'articolo indicava quali selettori possono essere usati ora nei browser moderni come Mozilla/Firefox, Safari e Opera. Dobbiamo solo aspettare il supporto da parte di Internet Explorer prima di cominciare ad usare i selettori CSS 2.1 al massimo della loro potenza. La buona notizia è che Internet Explorer li supporterà, almeno in parte, nella nuova versione 7.

Se guardiamo avanti, vi sono selettori ancor più potenti che aspettano di essere implementati e usati nei CSS3. Molti di questi selettori sono già stati implementati nei browser moderni, ma in generale il supporto è ancora problematico per fare affidamento su questi nuovi selettori. Tuttavia, vi sono casi in cui essi possono essere usati al fine di aggiungere caratteristiche avanzate, e quindi penso che dare un'occhiata ai nuovi selettori possa essere utile.

In questo articolo, la specifica a cui mi riferisco è la bozza sui selettori del 15 dicembre 2005. I nuovi selettori descritti in questo documento verranno usati dai CSS di livello 3, ma possono essere usati anche da altri linguaggi. Se leggerete questo articolo a distanza di mesi o di anni, può essere importante verificare se è disponibile una versione più recente.

Non spiegherò qui i fondamenti dei selettori CSS. Se avete bisogno di una rinfrescata alla memoria, potete cominciare con I selettori CSS 2.1, Parte 1.

Per prima cosa, ecco un breve sguardo d'insieme dei selettori CSS3:

Sguardo d'insieme della sintassi dei selettori CSS3
Selettore Pattern Descrizione
Selettore di attributo che seleziona una sottostringa E[att^=”val”] Seleziona ogni elemento E il cui valore di attributo att inizia con “val”.
Selettore di attributo che seleziona una sottostringa E[att$=”val”] Seleziona ogni elemento E il cui valore di attributo att termina con “val”.
Selettore di attributo che seleziona una sottostringa E[att*=”val”] Seleziona ogni elemento E il cui valore di attributo att contiene la sottostringa “val”.
Pseudo-classe strutturale E:root Seleziona l'elemento radice del documento. In HTML, l'elemento radice è sempre l'elemento HTML.
Pseudo-classe strutturale E:nth-child(n) Seleziona ogni elemento E che è l'n-esimo figlio del suo genitore.
Pseudo-classe strutturale E:nth-last-child(n) Seleziona ogni elemento E che è l'n-esimo figlio del suo genitore, partendo dall'ultimo figlio.
Pseudo-classe strutturale E:nth-of-type(n) Seleziona ogni elemento E che è l'n-esimo fratello del suo tipo.
Pseudo-classe strutturale E:nth-last-of-type(n) Seleziona ogni elemento E che è l'n-esimo fratello del suo tipo, partendo dall'ultimo fratello.
Pseudo-classe strutturale E:last-child Seleziona ogni elemento E che è l'ultimo figlio del suo genitore.
Pseudo-classe strutturale E:first-of-type Seleziona ogni elemento E che è il primo fratello del suo tipo.
Pseudo-classe strutturale E:last-of-type Seleziona ogni elemento E che è l'ultimo fratello del suo tipo.
Pseudo-classe strutturale E:only-child Seleziona ogni elemento E che è l'unico figlio del suo genitore.
Pseudo-classe strutturale E:only-of-type Seleziona ogni elemento E che è l'unico fratello del suo tipo.
Pseudo-classe strutturale E:empty Seleziona ogni elemento E che non ha figli (inclusi i nodi di testo).
Pseudo-classe di destinazione E:target Seleziona un elemento E che è la destinazione dell'URL di riferimento.
Pseudo-classe degli stati degli elementi della UI E:enabled Seleziona ogni elemento E dell'interfaccia utente (controllo di un form) che è abilitato.
Pseudo-classe degli stati degli elementi della UI E:disabled Seleziona ogni elemento E dell'interfaccia utente (controllo di un form) che è disabilitato.
Pseudo-classe degli stati degli elementi della UI E:checked Seleziona ogni elemento E dell'interfaccia utente (controllo di un form) che viene selezionato.
Pseudo-elemento dei frammenti di elementi della UI E::selection Seleziona la porzione di un elemento E attualmente selezionata o evidenziata dall'utente.
Pseudo-classe di negazione E:not(s) Seleziona ogni elemento E che non corrisponde al selettore semplice s.
Combinatore del fratello generico E ~ F Seleziona ogni elemento F che viene preceduto da un elemento E.

Se vi sembra che tutto questo non abbia molto senso ora, non preoccupatevi. Ogni selettore verrà descritto con maggiori dettagli in questo articolo, e ci sono esempi su come ciascun selettore può essere usato.

Selettori di attributo che selezionano una sottostringa

Questo gruppo di selettori è nuovo, e i selettori in esso contenuti permettono agli sviluppatori di selezionare sottostringhe nel valore di un attributo.

Supponiamo di avere un documento HTML che contiene la seguente marcatura:


<div id="nav-primary"></div>
<div id="content-primary"></div>
<div id="content-secondary"></div>
<div id="tertiary-content"></div>
<div id="nav-secondary"></div>

Usando i selettori di attributo che selezionano sottostringhe potete selezionare le combinazioni di queste parti strutturali del documento.

La seguente regola imposterà il colore di sfondo di tutti gli elementi div il cui id comincia con “nav”:


div[id^="nav"] { background:#ff0; }

In questo caso il selettore selezionerà div#nav-primary e div#nav-secondary.

Per selezionare gli elementi div il cui id termina con “primary”, potete usare la seguente regola:


div[id$="primary"] { background:#ff0; }

Questa volta il selettore selezionerà div#nav-primary e div#content-primary.

La seguente regola invece si applica a tutti gli elementi div il cui id contiene la sottostringa “content”:


div[id*="content"] { background:#ff0; }

Gli elementi selezionati da questa regola sono div#content-primary, div#content-secondary, e div#tertiary-content.

I selettori di attributo che selezionano una sottostringa sono pienamente supportati dalle ultime versioni di Mozilla, Firefox, Flock, Camino, Safari, OmniWeb, e Opera. Se non fosse per Internet Explorer potremmo iniziare ad usarli da ora.

La pseudo-classe :target

Gli URL con identificatori di frammento (un “#” seguito da un nome di ancora o un id di elemento) creano un collegamento ad un certo elemento all'interno del documento. L'elemento collegato è l'elemento di destinazione, e la pseudo-classe :target rende possibile l'assegnazione di stile a tale elemento. Se l'URL corrente non ha un identificatore di frammento, la pseudo-classe :target non seleziona nessun elemento.

Posta la struttura citata in precedenza, la seguente regola crea un contorno attorno div#content-primary quando l'URL contiene l'identificatore di frammento:


div#content-primary:target { outline:1px solid #300; }

Un esempio di URL è http://www.example.com/index.html#content-primary.

La pseudo-classe :target è attualmente supportata dai browser basati su Mozilla e Safari.

Pseudo-classi degli stati degli elementi della UI

Le pseudo-classi :enabled e :disabled

Le pseudo-classi :enabled e :disabled permettono agli sviluppatori di specificare l'aspetto degli elementi dell'interfaccia utente (controlli dei form) che sono abilitati e disabilitati, a patto che il browser permetta l'assegnazione di stili ai controlli dei form. Le seguenti regole applicheranno diversi colori di sfondo a singoli campi di testo, a seconda che questi siano abilitati o disabilitati.


input[type="text"]:enabled { background:#ffc; }
input[type="text"]:disabled { background:#ddd; }

La pseudo-classe :checked

La pseudo-classe :checked permette agli sviluppatori di specificare l'aspetto degli elementi radio e delle caselle di scelta (sempre a patto che il browser consenta l'assegnazione di stili ai controlli dei form). La seguente regola applica un bordo verde agli elementi radio e alle caselle di scelta selezionate:


input:checked { border:1px solid #090; }

Le pseudo-classi degli stati degli elementi della UI sono attualmente supportate da Opera e dai browser basati su Mozilla.

Si noti che molti browser pongono delle limitazioni al cambio di aspetto dei controlli dei form. Potete saperne di più leggendo i miei articoli Dare stile ai controlli dei form e Dare stile ad ancor più controlli dei form.

Pseudo-classi strutturali

Le pseudo-classi strutturali permettono agli sviluppatori di selezionare elementi in base alle informazioni reperite nell'albero del documento, ma non raggiungibili dagli altri selettori o combinatori semplici. Le pseudo-classi strutturali sono molto potenti, ma sfortunatamente i browser ne supportano solo una minima parte.

La pseudo-classe :root

La pseudo-classe :root seleziona l'elemento radice del documento. In HTML l'elemento radice è sempre l'elemento HTML, il che significa che le seguenti regole sono uguali (o quasi - :root ha una specificità maggiore di html):


:root { background:#ff0; }
html { background:#ff0; }

La pseudo-classe :root è attualmente supportata dai browser basati su Mozilla e Safari.

La pseudo-classe :nth-child()

La pseudo-classe :nth-child() seleziona un elemento che ha un certo numero di fratelli prima di sé nell'albero del documento. Questo argomento, posto all'interno delle parentesi, può essere un numero, una parola chiave o una formula.

Un numero b seleziona il b-esimo figlio. La seguente regola si applica a tutti gli elementi p che sono il terzo figlio del loro elemento genitore:


p:nth-child(3) { color:#f00; }

Le parole chiave odd e even possono essere usate per selezionare quegli elementi il cui indice è pari (even) o dispari (odd). L'indice del primo figlio di un elemento è 1, quindi la regole che segue selezionerà ogni elemento p che è il primo, terzo, quinto, ecc. figlio del suo elemento genitore:


p:nth-child(odd) { color:#f00; }

La seguente regola seleziona gli elementi p che sono il secondo, quanrto, sesto ecc. figlio del loro elemento genitore:


p:nth-child(even) { color:#f00; }

La formula an + b può essere usata per creare pattern ripetuti più complessi. Nella formula a rappresenta una dimensione ciclica, n è un contatore che parte da 0, e b rappresenta un valore di offset. Tutti i valori sono interi. Capire il loro funzionamento diventa più semplice se osservate i seguenti esempi.

Le seguenti regole selezionano tutti gli elementi p il cui indice è un multiplo di 3. Nella prima regola b è 0 e viene quindi omesso nella seconda:


p:nth-child(3n+0) { color:#f00; }
p:nth-child(3n) { color:#f00; }

Il valore di offset può essere usato per definire da quale figlio cominci ad essere applicata la regole ripetuta. Se avete una tabella con 20 righe e volete che ogni riga dispari dopo la decima abbia uno sfondo differente, potete usare questa regola:


tr:nth-child(2n+11) { background:#ff0; }

Dato che n inizia da 0, il primo elemento tr ad essere selezionato è l'undicesimo. Poi viene il tredicesimo, il quindicesimo e così via.

Trovate maggiori dettagli nella sezione della specifica sui selettori CSS3.

Ed il supporto dei browser a questo utilissimo selettore? Non buono. Attualmente nessun browser supporta questo e gli altri selettori “nth”. Correggetemi se avete informazioni diverse.

La pseudo-classe :nth-last-child()

La pseudo-classe :nth-last-child() funziona come la pseudo-classe :nth-child(), con la differenza che seleziona un elemento che abbia un certo numero di fratelli dopo di sé nell'albero del documento. In altri termini, il conteggio inizia dall'ultimo figlio invece che dal primo e va a ritroso. La seguente regola seleziona il terzultimo elemento tr di una tabella:


tr:nth-last-child(2) { background:#ff0; }

La pseudo-classe :nth-last-child() non è attualmente supportata da nessun browser.

La pseudo-classe :nth-of-type()

La pseudo-classe :nth-of-type() funziona come la pseudo-classe :nth-child(), ma calcola solo quegli elementi che sono dello stesso tipo dell'elemento a cui si applica la regola. Questa regola seleziona ogni elemento p che è il terzo elemento p del suo genitore:


p:nth-of-type(3) { background:#ff0; }

Si rivela utile se volete assicurarvi di selezionare solo il terzo elemento p. Potreste pensare di usare solo la pseudo-classe nth-child, ma :nth-child(3) tiene conto di tutti gli elementi fratelli, ed il risultato sarà diverso a meno che tutti gli elementi p hanno solo fratelli di tipo p.

La pseudo-classe :nth-of-type() non è attualmente supportata da nessun browser.

La pseudo-classe :nth-last-of-type()

La pseudo-classe :nth-last-of-type() seleziona un elemento che ha un certo numero di fratelli dello stesso tipo dopo di sé nell'albero del documento. Proprio come la pseudo-classe :nth-last-child(), inizia a contare dall'ultimo figlio invece che dal primo, e conta all'indietro. La seguente regola seleziona ogni terzultimo fratello di tipo p:


p:nth-last-of-type(2) { background:#ff0; }

La pseudo-classe :nth-last-of-type() non è attualmente supportata da nessun browser.

La pseudo-classe :last-child

La pseudo-classe :last-child seleziona un elemento quando questo è l'ultimo figlio del suo elemento genitore. È lo stesso che :nth-last-child(1). Questa regola seleziona tutti gli elementi p che sono gli ultimo figli dell'elemento genitore:


p:last-child { background:#ff0; }

La pseudo-classe :last-child funziona nei browser basati su Mozilla. Non viene supportata da Opera ed ha problemi in Safari (la regola di sopra seleziona tutti gli elementi p nel documento). A sorpresa funziona in OmniWeb (versione 5.1.1), nonostante questo browser sia basato su Safari. La causa risiede in una regressione nell'ultima versione di WebKit, dato che OmniWeb si basa su una versione anteriore di WebKit rispetto a quella usata da Safari.

La pseudo-classe :first-of-type

La pseudo-classe :first-of-type seleziona un elemento quando questo è il primo fratello del suo tipo. È lo stesso che :nth-of-type(1).


p:first-of-type { background:#ff0; }

La pseudo-classe :first-of-type non è attualmente suppportata da nessun browser.

La pseudo-classe :last-of-type

La pseudo-classe :last-of-type seleziona un elemento quando questo è l'ultimo fratello del suo tipo. È lo stesso che :nth-last-of-type(1).


p:last-of-type { background:#ff0; }

La pseudo-classe :last-of-type non è attualmente supportata da nessun browser.

La pseudo-classe :only-child

La pseudo-classe :only-child seleziona un elemento il cui genitore non ha altri elementi figli. È lo stesso (ma con specificità inferiore) che :first-child:last-child o :nth-child(1):nth-last-child(1).


p:only-child { background:#ff0; }

La pseudo-classe :only-child funziona nei browser basati su Mozilla. Safari sembra interpretarla come :first-child (la regola di prima seleziona tutti gli elementi p nel documento che sono i primi figlio del loro elemento genitore).

La pseudo-classe :only-of-type

La pseudo-classe :only-of-type seleziona un elemento il cui genitore non ha altri figli dello stesso tipo dell'elemento. È lo stesso (ma con specificità inferiore) che :first-of-type:last-of-type o :nth-of-type(1):nth-last-of-type(1).


p:only-of-type { background:#ff0; }

La pseudo-classe :only-of-type non è attualmente supportata da nessun browser.

La pseudo-classe :empty

La pseudo-classe :empty seleziona un elemento senza figli. Questo comprende anche i nodi di testo, e quindi dei seguenti elementi solo il primo è vuoto.


<p></p>
<p>Text</p>
<p><em></em></p>

La seguente regola seleziona quindi il primo elemento:


p:empty { background:#ff0; }

La pseudo-classe :empty è attualmente supportata dai browser basati su Mozilla. Safari applica erroneamente la regola a tutti gli elementi del tipo dato.

La pseudo-classe di negazione

La pseudo-classe di negazione, scritta :not(s), prende un selettore semplice come argomento. Seleziona gli elementi che non sono selezionati dal selettore semplice. Per esempio, la seguente regola seleziona tutti gli elementi che non sono un elemento p:


:not(p) { border:1px solid #ccc; }

La pseudo-classe di negazione funziona attualmente sui browser basati su Mozilla e Safari.

Lo pseudo-elemento ::selection

Lo pseudo-elemento ::selection seleziona la porzione di un elemento attualmente selezionata o sottolineata dall'utente. Un possibile uso è il controllo dell'aspetto del testo selezionato.

Poche proprietà si applicano allo pseudo-elemento ::selection: color, background, cursor, e outline.

La seguente regola rende rosso il testo di una selezione:


::selection { color:#f00;	}

::selection attualmente funziona solo sui browser basati su Safari. Il comportamento è alquanto imprevedibile, e l'implementazione di Safari ha quindi bisogno di essere migliorata. I browser basati su Mozilla la supportano se si usa un prefisso -moz-: ::-moz-selection. Il prefisso alla fine verrà rimosso.

Il combinatore del fratello generico

Il combinatore del fratello generico consiste di due selettori semplici separati da un carattere “tilde” (~). Seleziona le ricorrenze degli elementi selezionati dal secondo selettore semplice che sono precedute da un elemento selezionato dal primo selettore semplice. Entrambi gli elementi devono avere lo stesso genitore, ma il secondo elemento non deve essere immediatamente preceduto dal primo elemento. Questa regola seleziona gli elementi ul preceduti da un elemento p con lo stesso genitore:


p ~ ul { background:#ff0;	}

Il combinatore del fratello generico è attualmente supportato da Opera e dai browser basati su Mozilla.

Richiesto un miglior supporto dei browser

Alcuni selettori CSS3 sono ampiamente supportati. Sfortunatamente, alcuni dei selettori più utili non sono supportati affatto o lo sono in modo limitato. Questo rende molti dei selettori descritti in questo articolo. più o meno inutili nel Web di oggi. Ma non abbiate paura di sperimentare. Potete sempre usare quelli che sono supportati per fornire un futuro potenziamento ai browser avanzati.

Quindi quale browser pensate che sarà il primo a supportare tutti i selettori CSS3? Safari, Firefox, o Opera? O forse Internet Explorer?

Torna su