I selettori di attributo nel linguaggio CSS3.

I selettori di attributo nel linguaggio CSS3 e le possibili applicazioni per gli utenti di Blogger.

Le specifiche CSS3 non sono state ancora pubblicate dal W3C, il consorzio che si occupa di creare uno standard comune per i linguaggi di markup e per i protocolli di comunicazione in modo da sviluppare tutte le potenzialità del web. Vengono però periodicamente pubblicate informazioni sulle novità in fase di sviluppo. Abbiamo già visto come conoscere i selettori  di una pagina web utilizzando lo strumento Ispeziona Elemento di Chrome. Vediamo adesso di approfondire un pochino il tema.

I selettori di attributo consentono di individuare gli elementi di una pagina web in base ai loro attributi per poterli assegnare lo stile voluto. Si possono quindi identificare gli elementi senza essere costretti a assegnare una classe o un id. I selettori di attributo sono i seguenti

E[attribute]
E[attribute=value]
E[attribute~=value]
E[attribute|=value]
E[attribute^=value]
E[attribute$=value]
E[attribute*=value]

di cui i primi 4 già presenti nella versione CSS2 mentre gli ultimi 3 introdotti con la CSS3. Vediamo alcuni esempi di utilizzo per ciascuno di essi.

E[attribute]
Il selettore individua gli elementi che possiedono l'attributo attribute indipendentemente dal contenuto
a[title] { color: red; text-decoration: underline; }
comporterà che il seguente elemento con l'attributo title
<a title="titolo" href="#">Anchor Text</a>
sarà visualizzato secondo la regola della riga precedente cioè di colore rosso e sottolineato.

E[attribute=value]
La regola individua gli elementi che possiedono al loro interno attribute con un determinato valore.
a[title="titololink"] { color: red; text-decoration: underline; }
è una regola che verrà applicata per esempio a questo elemento
<a title="titololink" href="#">Anchor Text</a>

mostrando il collegamento di colore rosso e sottolineato. Per verificare il funzionamento di questo selettore di attributo, come degli altri, andate su un Editor HTML Online e incollate il codice

<style>
a[title="titololink"] { color: red; text-decoration: underline; }
</style>
<a title="titololink" href="#">Anchor Text</a>

e Anchor Text sarà di colore rosso e sottolineato.

E[attribute~=value]

Gli elementi individuati sono quelli con l'attributo attribute che contiene un elenco di parole separate da spazi di cui una sia esattamente value. In altri termini la regola

a[title~="gelsomino"] {color: yellow; font-weight:bold;background:#f3f3f3;}
sarà applicata al codice
<a title="fiore di gelsomino" href="#">Gelsomino</a>

E[attribute|=value]

Si tratta di un selettore simile al precedente con la sola differenza che le parole dovranno essere separate da trattini invece che da spazi. La regola

a[title|="gelsomino"] {color: yellow; font-weight:bold;background:#f3f3f3;}
sarà applicata al seguente elemento
<a title="gelsomino" href="#">Gelsomino</a>

E[attribute^=value]

Questo selettore di attributo è stato introdotto nella versione CSS3. Viene assegnata la regola CSS a tutti gli elementi in cui l'attributo attribute inizi con value. La regola

a[title^="fiore"] {color: yellow; font-weight:bold; background:#f7f7f7;}
verrà applicata ai seguenti elementi
<a title="fiore-di-gelsomino" href="#">Gelsomino</a>
<a title="fioredigelsomino" href="#">Gelsomino</a>
<a title="fiore di gelsomino" href="#">Gelsomino</a>

E[attribute$=value]

E' un selettore di attributo identico al precedente con la sola differenza che value deve trovarsi alla fine invece che all'inizio dell'attributo attribute. La regola

a[title$="gelsomino"] {color: yellow; font-weight:bold; background:#f7f7f7;}
sarà applicata in tutti questi elementi
<a title="fiore-di-gelsomino" href="#">Gelsomino</a>
<a title="fioredigelsomino" href="#">Gelsomino</a>
<a title="fiore di gelsomino" href="#">Gelsomino</a>

E[attribute*=value]

E' simile ai due precedenti con la variante che value non deve necessariamente trovarsi all'inizio o alla fine dell'attributo attribute ma in una qualsiasi posizione. La regola 

a[title*="gelsomino"] {color: yellow; font-weight:bold; background:#f7f7f7;}
sarà applicata ai seguenti elementi
<a title="fiore-di-gelsomino" href="#">Fiore</a>
<a title="gelsomino in fiore" href="#">Gelsomino</a>
<a title="fiore di gelsomino in un giardino" href="#">Giardino</a>

ALCUNE APPLICAZIONI DEI SELETTORI DI ATTRIBUTO

Se andiamo in Modello > Modifica HTML e subito sopra la riga ]]></b:skin> incolliamo il codice

a[href*="ideepercomputeredinternet"] {color:#003366; font-weight:bold;}

dopo aver salvato il modello, tutti i link nel cui URL sia presente ideepercomputeredinternet saranno visualizzati in grassetto e con il colore di codice #003366. Potrebbe essere un modo per visualizzare in modo diverso i link interni rispetto a quelli esterni al blog.

Se invece incollassimo sempre subito sopra alla riga ]]></b:skin> quest'altro codice

a[href$="jpg"] {background:#fff !important;}
a[href$="png"] {background:#fff !important;}
a[href$="gif"] {background:#fff !important;}

tutte le immagini in formato JPG, PNG e GIF avranno uno sfondo bianco. I neofiti di questi argomenti possono scaricare il mio ebook gratuito Guida all'HTML in cui sono presenti anche cenni di CSS.