I selettori di attributo servono a selezionare gli elementi in base ai loro attributi e/o al valore di tali attributi.
La specifica CSS 2.1 prevede quattro tipi. Altri tre tipi sono stati invece definiti nei CSS3.
Selezione in base alla presenza di un attributo
Con il primo tipo di selettore di attributo si selezionano tutti gli elementi che presentino nel codice HTML un determinato attributo, a prescindere dal valore dell'attributo stesso.
Sintassi ed esempi
La sintassi per questa tipologia è la seguente:
elemento[attributo] {dichiarazioni;}Il nome dell'attributo va posto tra parentesi quadre, senza racchiuderlo tra virgolette. Tra il nome dell'elemento e la definizione dell'attributo non va lasciato spazio.
Andando alla pratica, la regola che segue assegna il colore bianco (white) e la sottolineatura a tutti gli elementi a che presentino un attributo title:
a[title] {color: white; text-decoration: underline;}Dunque, in questa sequenza HTML, solo il primo e il terzo link corrispondono e solo ad essi sarà applicata la regola:
<p>Ecco un <a href="#" title="link">link</a>.</p>
<p>Ancora un <a href="#">link</a> ma senza l'attributo title.</p>
<p>Un altro <a href="#" title="">link</a>, con title vuoto.</p>
<p>Ultimo <a href="#" titles="link">link</a>.</p>Aggiungiamo alcune osservazioni:
- il secondo link non corrisponde al selettore perché non ha un attributo
title; - il terzo link corrisponde anche se l'attributo non ha un valore;
- il quarto non corrisponde perché il nome dell'attributo non è identico a quello definito nella regola CSS.
Selezione con valore corrispondente
Questo tipo di selettore individua tutti gli elementi che abbiano come valore dell'attributo specificato la stringa di testo impostata nella regola CSS.
Sintassi ed esempi
Iniziamo ancora una volta con la sintassi generica:
elemento[attributo="valore"] {dichiarazioni;}La stringa corrispondente al valore va messa tra virgolette se è composta da più di una parola. Posso dunque scrivere così:
a[title=lorem]Ma non così, perché la regola non verrebbe applicata:
a[title=lorem ipsum]Creiamo subito una regola CSS per la dimostrazione pratica:
a[title="lorem ipsum"] {color: white; text-decoration: underline;}Partendo da questo codice HTML, solo il primo link corrisponderà:
<p>Ecco un <a href="#" title="lorem ipsum">link</a>.</p>
<p>Ancora un <a href="#" title="link">link</a>.</p>
<p>Un altro <a href="#" title="loremipsum">link</a>.</p>
<p>Ultimo <a href="#" title="LOREM IPSUM">link</a>.</p>Perché solo il primo corrisponde?
- Nel primo link il valore dell'attributo nel codice HTML coincide perfettamente con quello definito nel CSS;
- nel secondo il valore è del tutto diverso;
- nel terzo le due parole della stringa sono scritte tutte attaccate;
- nel quarto sono scritte in maiuscolo, mentre nel CSS abbiamo usato il minuscolo (nella definizione del valore, dunque, si fa distinzione tra caratteri maiuscoli e minuscoli).
Selezione in base a valori che contengono una stringa
Questo tipo seleziona tutti gli elementi con un attributo che contenga una lista di parole separate da spazi, una delle quali corrisponde esattamente al valore definito nella regola CSS. A primo impatto non è molto intuitivo il suo funzionamento, ma cerchiamo di renderla comprensibile con un esempio.
Sintassi ed esempio
Ecco la sintassi di base:
elemento[attributo~="valore"] {dichiarazioni;}La differenza principale con il precedente selettore è che il segno = va preceduto dalla tilde (~).
Passando all'esempio, partiamo da questa regola CSS:
a[title~="lorem"] {color: white; text-decoration: underline;}Per assegnare la proprietà ad un elemento a è necessario che l'attributo title contenga una lista di parole separate da spazi e che nella lista sia presente la stringa lorem.
Dato questo codice HTML, dunque, la regola verrà applicata solo al primo e secondo link. Il terzo, infatti, non contiene la stringa lorem, il quarto la presenta in maiuscolo mentre nel CSS è stata scritta in minuscolo:
<p>Ecco un <a href="#" title="lorem ipsum sit">link</a>.</p>
<p>Ancora un <a href="#" title="link lorem">link</a>.</p>
<p>Un altro <a href="#" title="ipsum sit">link</a>.</p>
<p>Ultimo <a href="#" title="LOREM link">link</a>.</p>Selezione in base a valori che iniziano con una certa stringa
Si tratta di un selettore pochissimo utilizzato e di scarsa utilità. Individua tutti gli elementi in cui uno specifico attributo contiene una lista di parole separate da trattini, una delle quali corrisponde al valore definito nella regola CSS.
Sintassi ed esempio
La sintassi generica è questa:
elemento[attributo|="valore"] {dichiarazioni;}Riprendiamo modificandolo l'esempio visto poc'anzi:
a[title|="lorem"] {color: white; text-decoration: underline;}Solo il primo link corrisponde alla regola appena vista:
<p>Ecco un <a href="#" title="lorem-ipsum-dolor">link</a>.</p>
<p>Ancora un <a href="#" title="ipsum-lorem-dolor">link</a>.</p>