CSS  »  Articoli  »  CSS 3 

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.

Altri articoli

Altre guide

Altre newsletter