Due delle caratteristiche più importanti nel modulo dedicato ai selettori della nuova specifica CSS sono i selettori di attributo avanzati e le pseudo-classi strutturali. In questa breve serie di articoli tratteremo questi argomenti, analizzando il supporto che i browser forniscono e approfondendo con degli esempi. Per una panoramica sui selettori semplici vi rimando alla lezione ad essi dedicata della guida ai CSS.
I selettori di attributo
I selettori di attributo consentono di individuare gli elementi all'interno di una pagina in base ai loro attributi e assegnare così lo stile desiderato. E' possibile quindi identificare gli elementi di una pagina senza esser per forza costretti ad assegnare loro una classe o un id.
Innanzitutto vediamo nel dettaglio quali sono i selettori di attributo che analizzeremo nell'articolo. La lista è la seguente:
- E[attribute]
- E[attribute=value]
- E[attribute~=value]
- E[attribute|=value]
- E[attribute^=value]
- E[attribute$=value]
- E[attribute*=value]
I primi quattro selettori non sono nuovi. Infatti, essi sono stati introdotti già nella versione 2.1 dei CSS. La novità della versione 3 sono gli ultimi tre selettori, che vedremo risulteranno molto interessanti.
E[attribute]
Il selettore individua tutti gli elementi E che possiedono l'attributo attribute, indipendentemente dal contenuto dell'attributo.
Partiamo dal seguente codice CSS:
a[title] { color: blue; text-decoration: underline; }E vediamo alcuni esempi per verificare il funzionamento del selettore e analizzare alcuni casi particolari.
<a title="Lorem Ipsum" href="#">Lorem Ipsum</a>Al codice precedente verrà sicuramente applicata la proprietà dato che l'elemento a è presenta un attributo title.
<a title="" href="#">Lorem Ipsum</a>
<a title href="#">Lorem Ipsum</a>
<a TITLE="Lorem Ipsum" href="#">Lorem Ipsum</a>Anche in tutti gli esempi precedenti verrà applicata la proprietà. Nel primo e nel secondo caso, anche se l'attributo title è vuoto, è comunque definito e quindi viene trovato dal parser. Nel terzo caso invece la proprietà viene applicata perché gli attributi non sono case sensitive.
<a titles href="#">Lorem Ipsum</a>
<a titles="Lorem Ipsum" href="#">Lorem Ipsum</a>I due esempi precedenti, invece, non verranno presi in considerazione dato che l'attributo title contiene degli errori di scrittura.
Ecco l'esempio per verificare il tutto dal vivo.
E[attribute=value]
Questo selettore individua tutti gli elementi E che possiedono l'attributo attribute che al proprio interno contiene il valore value.
Anche per questo selettore, partiamo da uno snippet di codice come il seguente:
a[title="Lorem"] { color: blue; text-decoration: underline; }E analizziamo il funzionamento.
<a title="Lorem" href="#">Lorem Ipsum</a>
<a TITLE="Lorem" href="#">Lorem Ipsum</a>In entrambi i casi verrà applicata la proprietà (testo blue e sottolineato) avendo spiegato che l'attributo è case insensitive. Vediamo ora alcuni esempi in cui non verrà applicata la proprietà e perché.
<a title="Lorem " href="#">Lorem Ipsum</a>Il codice non produce effetti dato che contiene uno spazio che non è stato dichiarato nella regola CSS.
<a title="LOREM " href="#">Lorem Ipsum</a>Anche questo codice non produrrà effetti dato che il valore dell'attributo, a differenza dell'attributo stesso, è case sensitive e il titolo è stato inserito tutto in maiuscolo.
Anche in questo caso possiamo verificare tutto con un esempio.
E[attribute~=value]
Il selettore individua tutti gli elementi E il cui attributo attribute contiene una lista di parole separate da spazi, una delle quali è esattamente value. A primo impatto non è molto intuitiva come proprietà ma cerchiamo di renderla comprensibile con un esempio.
Partendo da un codice CSS come il seguente:
a[title~="dolor"] { color: blue; text-decoration: underline; }Per assegnare la proprietà ad un oggetto a è necessario che l'attributo title contenga una lista di parole separate da spazi e che nella lista sia presente la stringa dolor.
Quindi un codice come il seguente farà sicuramente matching con la regola CSS:
<a title="Lorem ipsum dolor sit amet" href="#">Lorem Ipsum</a>Come per il selettore precedente, anche in questo caso l'attributò sarà case insensitive ma il valore farà distinzione tra caratteri maiuscoli e minuscoli.
E[attribute|=value]
Selettore del tutto simile al precedente con una semplice differenza nella definizione del valore. Mentre per l'esempio precedente il valore doveva essere separato da spazi, in questo selettore il valore deve essere separato da trattini (-).
Quindi, volendo dare una definizione precisa diremo che il selettore individua tutti gli elementi E il cui attributo attribute contiene una lista di parole separate da trattini, una delle quali è esattamente value.
Vediamo un semplicissimo esempio:
a[title|="Lorem"] { color: blue; text-decoration: underline; }
<a title="Lorem-ipsum-dolor-sit-amet" href="#">Lorem Ipsum</a>Le proprietà descritte per i selettori precedenti sono ovviamente valide anche per il selettore corrente.
E[attribute^=value]
Con questo selettore incominciamo a trattare i nuovi selettori introdotti dalla versione 3 dei CSS.
Il simbolo speciale utilizzato da questi selettori richiama in qualche modo le tecniche utilizzate dalle regular expression. Infatti il loro significato è facilmente intuibile da tutti coloro che almeno una volta hanno avuto a che fare con le espressioni regolari.
Il selettore corrente assegna la regola CSS a tutti gli elementi E in cui l'attributo attribute inizia con il valore value.
Come per le espressioni regolari quindi, l'attributo deve iniziare esattamente con il valore value per fare matching con la proprietà.
Vediamo alcuni esempi, partendo dal codice seguente:
a[title^="Lorem"] { color: blue; text-decoration: underline; }E' sufficiente quindi che l'attributo inizi o sia esattamente uguale a "Lorem". Vediamo alcuni esempi a cui verrà sicuramente assegnata la proprietà:
<a title="Lorem" href="#">Lorem Ipsum</a>
<a title="Lorem ipsum dolor sit amet" href="#">Lorem Ipsum</a>
<a title="Lorem-ipsum-dolor-sit-amet" href="#">Lorem Ipsum</a>
<a title="Loremipsum dolor sit amet" href="#">Lorem Ipsum</a>Nella prima riga il title corrisponde esattamente con il valore di value e quindi è la situazione base. Nel secondo esempio abbiamo una frase la cui prima parola corrisponde con "Lorem" e anche in questo caso la proprietà verrà applicata. Nel terzo e nel quarto caso invece possiamo notare che, anche se non ci sono spazi che separano la stringa, verrà comunque applicata la regola CSS.
Vediamo invece quali saranno i casi in cui non ci sarà corrispondenza con la proprietà CSS spiegandone i motivi.
<a title="Lor em" href="#">Lorem Ipsum</a>
<a title="LOrem" href="#">Lorem Ipsum</a>
<a title="Ipsum Lorem" href="#">Lorem Ipsum</a>In tutti e tre gli esempi precedenti, invece, non verrà applicata la regola perché non c'è in nessun modo una corrispondenza. Nel primo caso abbiamo uno spazio che spezza la stringa "Lorem"; nel secondo caso abbiamo la lettera O maiuscola e, avendo spiegato in precedenza che il valore non è case sensitive, non farà match con la proprietà. L'ultimo caso è banale, il title non inizia con "Lorem" e quindi non c'è corrispondenza.
E[attribute$=value]
Il selettore è del tutto identico a quello precedente con un'unica differenza fondamentale. Il valore value deve trovarsi al termine dell'attributo attribute.
La seguente regola:
a[title$="amet"] { color: blue; text-decoration: underline; }verrà sicuramente assegnata ai seguenti esempi:
<a title="amet" href="#">Lorem Ipsum</a>
<a title="Lorem ipsum dolor sit amet" href="#">Lorem Ipsum</a>
<a title="Lorem-ipsum-dolor-sit-amet" href="#">Lorem Ipsum</a>
<a title="Lorem ipsum dolor sitamet" href="#">Lorem Ipsum</a>Le motivazioni sono del tutto identiche all'esempio precedente. Esempi in cui, invece, non ci sarà corrispondenza sono i seguenti:
<a title="am et" href="#">Lorem Ipsum</a>
<a title="Lorem ipsum dolor sit ameT" href="#">Lorem Ipsum</a>
<a title="Lorem amet ipsum" href="#">Lorem Ipsum</a>Anche in questi esempi non c'è molto da spiegare. Nel primo caso la stringa non corrisponde con "amet"; nella seconda riga termina con una T maiuscola non definita e, nell'ultimo esempio, la stringa non termina con la proprietà value definita.
E[attribute*=value]
L'ultimo selettore è sicuramente il più semplice e, probabilmente, il più interessante. E' del tutto identico ai due precedenti con la sola differenza che il valore value deve trovarsi nell'attributo attribute, indipendentemente dalla posizione che occupa.
Data la seguente regola:
a[title*="dolor"] { color: blue; text-decoration: underline; }tutti i seguenti esempi faranno matching con essa:
<a title="dolor" href="#">Lorem Ipsum</a>
<a title="Lorem ipsum dolor" href="#">Lorem Ipsum</a>
<a title="Lorem ipsum dolor sit amet" href="#">Lorem Ipsum</a>
<a title="Lorem-ipsum-dolor-sit-amet" href="#">Lorem Ipsum</a>
<a title="Lorem ipsum dolorsit amet" href="#">Lorem Ipsum</a>La prima riga, anche in questo caso, è il caso base e quindi corrisponde. Nella seconda riga la stringa si trova alla fine mentre, negli altri esempi, si trova nel mezzo del valore di title ma in tutti i casi corrisponderà alla regola definita.
Gli unici casi in cui la proprietà non verrà assegnata saranno quando essa non è presente oppure c'è qualche differenza case sensitive come nei seguenti esempi:
<a title="do lor" href="#">Lorem Ipsum</a>
<a title="doLor" href="#">Lorem Ipsum</a>
<a title="Lorem ipsum sit amet" href="#">Lorem Ipsum</a>
<a title="Lorem ipsum DOLOR sit amet" href="#">Lorem Ipsum</a>Tutti gli esempi visti sono disponibili per il download.
Compatibilità con i browser
Nella tabella seguente possiamo visualizzare il supporto che i vari browser forniscono ai vari selettori.
Ovvia l'incompatibilità con la versioni inferiori o uguali alla 6 di Internet Explorer considerando che il browser è stato rilasciato quando ancora queste specifiche non erano state neppure messe in cantiere.
