Cosa fa l’attributo Selector?

Questo utilissimo attributo ci semplifica la formattazione degli elementi del codice Html come per esempio gli Headers o piú semplicemente tutti gli elementi che dispongono di un attributo Title. Quindi aiuta per esempio la formattazione di specifici link che sono giá formattati dalle classi, aumentando quindi le possibilitá di formattazione del testo utilizzando come "selettore" l’attributo Title.

Come funziona il CSS Selectors?

Immaginiamo di avere un paragrafo (P) al quale é stata assegnata una classe che chiameremo per esempio miolink nella quale il colore degli Hyperlink é stato fissato con il rosso. In questo paragrafo abbiamo inserito un testo di circa trecento parole tra le quali troviamo quattro Hyperlink che puntano a risorse diverse. Questi quattro Hyperlink vorremmo che avessero ognuno un colore diverso per differenziarsi tra loro magari per importanza. Ci troveremmo quindi di fronte al problema che per ognuno di essi bisognerebbe creare una classe in un secondo contenitore sia questo un paragrafo o uno span, che ci permetta di distinguere il link in base al contenitore dove é stato inserito e di conseguenza assegnare un colore diverso per gli Hyperlink di quel contenitore. Un bel casino di classi codice e peso inutile! Proprio in un caso come quello esposto qui sopra potremo apprezzare moltissimo l’utilitá del nostro Css attributo Selectors.

La formattazione dei link con il Css Selectors

Abbiamo visto che la classe miolink del paragrafo, prevede il colore rosso per i testi anchor  presenti nel testo. Vorremmo peró che i quattro link all’interno abbiamo un colore diverso in base all’importanza che abbiamo attribuito al testo anchor di essi. Per evitare che si debba assegnare un nuovo contenitore ai link utilizzeremo il Css Selectors. Vediamo l’esempio con un link inserito in un paragrafo:

<p class="miolink">Consigli su <a href="formattare-css.html" title="formattiamo con il CSS" >come formattare con il CSS</a> il testo di una pagina web. Con l’aiuto dello <a href="formattare-css.html"  title="lo stile CSS" >stile CSS</a> possiamo assegnare un colore diverso ad ogni Link pur mantendo tutto in un unico contenitore come per esempio <a href="paragrafi.html" title="I paragrafi nel codice" >il paragrafo P</a> che stiamo utilizzando</p>

Come possiamo vedere, i nostri (per l’esempio finti) Hyperlink hanno il testo anchor in rosso perché appartengono tutti alla classe miolink che prevede nel foglio di stile il colore rosso per gli Hyperlink:

Questo é ció che vediamo nel foglio di stile:  .miolink a {color: #ff0000}

CSS Selectors come usarlo

Immaginiamo per esempio che vorremmo assegnare ai tre Hyperlink dell’esempio, i colori arancione, verde e blu, in ordine di apparizione. Vediamo come:

.miolink [ title="formattiamo con il CSS" ] {color: #FF6600}

.miolink [ title="lo stile CSS" ] {color: #00CC00}

.miolink [ title="I paragrafi nel codice" ] {color: #0000FF}

Come possiamo vedere stiamo utilizzando una selezione per distinguere nella stessa classe tre diversi Hyperlink, attraverso il loro attributo Title.

 Css Selectors e le sue varianti

Le possibilitá offerte da questo attributo non si fermano al solo riconoscimento delle parole racchiuse nell’attributo Ttile del documento, vanno ancora oltre ampliando le possibilitá di formattazione nettamente. Vediamo come:

[ title="Una giornata uggiosa" ]  considera tutti i titoli che contengono le parole "una giornata uggiosa"

[ title ~="Una giornata uggiosa" ] Considera tutti i Title che contengono come termine le parole "una giornata uggiosa"

[ title ^="Una giornata uggiosa" ] Considera tutti i Title che iniziamo con le parole "una giornata uggiosa".

 CSS Selectors nei link delle Email

Facendoci forti degli esempi fatti qui sopra, potremo stilizzare usando lo stesso sistema per gli <a href="mailto">. Nel foglio di stile andremo a indicare a[ <a href^="mailto">] per fargli riconoscere tutti gli Hyperlink della email. 

Alla prossima…

Angelo Palma