CSS  »  Articoli  »  CSS 3 

I selettori CSS3

I selettori sono da sempre stati uno degli aspetti più affascinanti dei CSS: costituiscono infatti un vero e proprio "ponte" tra la struttura (ovvero l'HTML) e la presentazione, ed è grazie ad essi che è possibile creare regole specifiche e mirate per i vari elementi di pagina. In tal senso, i selettori CSS3 estendono non di poco la versatilità e la potenza dei selettori CSS2.1. Vedremo qui una breve panoramica di quelli che sono, a parer mio, i più interessanti, mentre per il dettaglio rimando alla sezione del W3C dedicata ai selettori CSS3 oltre che all'ottima mini-reference CSS3 Selectors Explained di Roger Johansson. In quanto a quest'ultimo articolo, c'è da dire che è stato scritto a Gennaio 2006, ma riflette perfettamente l'ultimo Working Draft del W3C che risale al 15 Dicembre 2005.

Per quanto riguarda il supporto dei browser: generalmente i selettori CSS3 sono ben supportati da Opera, Firefox e Safari; la nomenclatura adottata dai browser è aderente al modulo del W3C. C'è da dire anche che, sebbene si tratti di una parte potente e versatile dei CSS3, è forse ad oggi quella da usare con più cautela: infatti proprio per la loro natura, un selettore non supportato è in grado di inibire l'intera regola a cui appartiene.

I selettori di attributo

Uno classe di selettori utilissima nei CSS3 è quella dedicata ai selettori di attributo, gli unici ad essere tra l'altro supportati anche da IE7, oltre che ovviamente da Opera, Firefox e Safari. Vediamo brevemente di cosa si tratta:

• selettore[att^="val"]
  Identifica gli elementi individuati da "selettore" che abbiano un attributo "att" che inizia con la stringa "val"
• selettore[att*="val"]
  Identifica gli elementi individuati da "selettore" che abbiano un attributo "att" che contiene la stringa "val"
• selettore[att$="val"]
  Identifica gli elementi individuati da "selettore" che abbiano un attributo "att" che termina con la stringa "val"

Abbiamo visto nell'articolo Link con mini-icone come questi selettori siano molto pratici per individuare, ad esempio, il tipo di file a cui punta un link per aggiungere un'icona che ne identifichi la tipologia. Questa forse è l'unica classe di selettori che si può usare con relativa sicurezza, dato il loro supporto esteso.

Le pseudo-classi strutturali

Questa è a parer mio una delle parti potenzialmente più utili dei selettori CSS3, ma il loro supporto è purtroppo scadente allo stato attuale dato che buona parte di essi è implementata solo in Konqueror e lo sarà probabilmente in Opera 9.5. Vediamoli in breve.

La pseudo-classe della forma selettore:nth-child(a+bn), dove a e b sono numeri interi con segno mentre n è una costante, definisce una regola attraverso la quale è possibile individuare un elemento individuato da "selettore" che sia il figlio con ordine corrispondente al numero o alla formula espressa tra parentesi. Alcuni esempi:

• p:nth-child(3) individua i paragrafi che siano terzi figli di un qualsiasi elemento.
• tr:nth-child(2n) individua tutte le righe pari di ogni tabella, dato che n assume valori interi e maggiori o uguali a zero. L'espressione è equivalente a tr:nt-child(even)
• tr:nt-child(2n) individua tutte le righe dispari di ogni tabella. L'espressione è equivalente a tr:nt-child(odd)
• div#content div:nth-child(n-3) individua i div all'interno del div con id="content" che siano il primo, il secondo o il terzo elemento figlio. Da notare che se il div con id="content" non ha tra i primi suoi tre figli almeno un div, la regola che usa questo selelettore non verrà applciata
• tr:nth-child(5n): individua tutte le righe all'interno di una tabella che come indice sono multiple di cinque.

Il funzionamento della pseudo classe selettore:nth-lasth-child(n) è del tutto analogo, con la differenza che il conteggio parte dal basso, ovvero dall'ultimo figlio. Per esempio il selettore *:last-child(0) individua tutti gli elementi che sono ultimi figli di qualsiasi contenitore.

Molto più intuitive e versatili le pseudo-classi della forma selettore:nth-of-type(a+bn) e selettore:nth-last-of-type(a+bn), il cui funzionamento è simile a quello delle due appena viste per quanto riguarda l'espressione tra parentesi, ma con la differenza sostanziale che il conteggio viene effettuato non su tutti i figli ma solo quelli individuati dal selettore a cui sono applicate. Ecco alcuni esempi:

• p:nth-of-type(3) individua i terzi paragrafi di qualsiasi elemento
• div#menu li:nth-of-type-child(5)>a individua il quinto link contenuto all'interno del div id="menu"
• div p:nth-last-of-type(0) individua tutti gli ultimi paragrafi che siano contenuti all'interno di un div

In aggiunta a first-child già inclusa nelle specifiche 2.1, si aggiungono alcuni casi speciali delle pseudo-classi appena viste:

• selettore:last-child: individua gli elementi identificati da "selettore" che siano anche ultimi figli del loro contenitore
• selettore:first-of-type per ogni elemento, individua il primo figlio identificato da "selettore"
• selettore:last-of-type per ogni elemento, individua l'ultimo figlio identificato da "selettore"

Queste in breve le pseudo-classi strutturali, una delle caratteristiche più appetitose per quanto riguarda i selettori CSS3. Il loro supporto allo stato attuale è scarso o assente, ed è un vero peccato vista la loro potenzialità espressiva.

Altri articoli

Altre guide

Altre newsletter