CSS  »  Articoli  »  CSS 3 

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.

Esempio 6.

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>

Esempio 7.

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.

Figura 1 - Supporto delle proprietà nei browser

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.

Altri articoli

Altre guide

Altre newsletter