I selettori di attributo in CSS 3

Uno strumento eccezionale per un webdesigner sono i selettori di attributo di CSS. Già la specifica 2.1 introduceva alcuni selettori che permettevano di semplificare notevolmente il codice HTML/CSS. Ora CSS3 completa il lavoro e mette a disposizione tre nuovi selettori che consentono di evitare il ricorso alle classi nella progettazione dell’aspetto grafico delle pagine.

I selettori di attributo previsti dalla specifica CSS 2.1 sono:

[att]
Individua gli elementi in cui sia stato impostato un certo attributo, qualunque sia il valore dell’attributo.
Ad esempio:

span[title]{ border-bottom: dotted 1px blue; }

[att=”val”]
Individua gli elementi in cui l’attributo “att” assuma in valore “val”:

input[type="text"]{ background-color: aqua; }

[att~=”val”]
Rappresenta un elemento il cui attributo “att” assume come valore una serie di parole separate da spazi in cui almeno una parola corrisponda esattamente a “val”

span[title~="carlo"] { text-decoration: underline; }

si applica al tag

<span title="carlo daniele">

[att|=”val”]
Rappresenta un elemento in cui l’attributo “att” corrisponda esattamente al valore “val” o cominci con “val” seguito immediatamente da un trattino (-)

span[title|="carlo"] { text-decoration: underline; }

si applica al tag

<span title="carlo-daniele">

CSS3 introduce tre nuovi selettori di attributo:

[att^=”val”]
Rappresenta un elemento in cui il valore dell’attributo “att” cominci con il prefisso “val”:

a[href^="https://digitaladoptive.wordpress.com"]{ background-color: aqua; }

[att$=”val”]
Rappresenta un elemento il cui attributo “att” assuma un valore che termina con il suffisso “val”:

a[href$=".pdf"]{ padding-right:10px; background: #FFF url(images/pdf_ico.png) right center }

[att*=”val”]
Rappresenta un elemento in cui l’attributo “att” assuma un valore che contiene il termine “val”.

Annunci