I selettori di attributo

24 giugno 2013

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.

Esempio.

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).

Esempio.

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>

Esempio.

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>

Esempio.

Approfondimenti CSS3

Tutte le lezioni

1 ... 8 9 10 ... 33

Se vuoi aggiornamenti su I selettori di attributo inserisci la tua e-mail nel box qui sotto:
 
X
Se vuoi aggiornamenti su I selettori di attributo

inserisci la tua e-mail nel box qui sotto:

Ho letto e acconsento l'informativa sulla privacy

Acconsento al trattamento di cui al punto 3 dell'informativa sulla privacy