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:
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?