CSS : Selettori d’attributo

Oltre a poter selezionare direttamente i tag possiamo anche decidere di dare uno stile ai loro attributi.

> Selettore attributo semplice : attraverso questa regola andiamo a modificare tutti gli attributi href a prescindere dall’URL di puntamento.

a[href] { color:#ff0000; }

> Selettore attributo esatto : attraverso questa regola si vanno a modificare solo i link ad un URL specifico.

a[href=””https://www.marketingpower.it”]

> Selettore attributo parziale : attraverso questa regola si può selezionare una parte del valore di un attributo, cioè il testo dopo  ~= deve essere presente nell’attributo separato da uno spazio.

img[alt~=”Marketing”]{color:#ff0000;}

> Selettore attributo specifico : attraverso questa regola si vanno a modificare gli attributi ed il testo dopo |= se seguiti dal carattere –

section[lang|=”it”]{color:#ff0000;}

> Selettore attributo che inizia con una sottostringa : attraverso questa regola si vanno a modificare gli attributi che hanno come inizio di stringa “inizio”

p[id^=”inizio”]{color:#ff0000;}

> Selettore attributo che finisce con una sottostringa : attraverso questa regola si vanno a modificare gli attributi che hanno come fine di stringa “fine”

p[id$=”fine”]{color:#ff0000;}

>Selettore attributo che contiene una sottostringa : attraverso questa regola si vanno a modificare gli attributi che contengono la stringa “inmezzo” all’interno del testo

section[title*=”inmezzo”]{color:#ff0000;}

Un uso corretto dei selettori d’attributo renderà certamente più semplice arrivare a buoni risultati per il nostro layout.

Vuoi far diventare
la tua azienda una mucca viola?
Contattaci!