Oggi invece di andare a brucare erba in campagna ho passato un pomeriggio leggendo…e leggi quà, leggi là ho imparato delle cose nuove e mi è venuta voglia di scrivere qualche altra pillolina che potrebbe servire per formattare in maniera particolare i form o i moduli in generale. Tutto questo attraverso i selettori di attributo. Ma prima di vedere come formattare i form vorrei scrivere dei post riguardo questi particolare e utili selettori.
Cosa sono i selettori di attributo?
I selettori di attributo formattano gli elementi in base ai loro attributi, ovviamente tramite css. Ci sono quattro tipo di selettori di attributo: selettore di attributo semplice, selezione basata su un valore di attributo esatto, selezione su un valore di attributo parziale e selettore di attributo specifico.
In questo post ne vedremo due:il selettore di attributo semplice e la selezione basata su un valore di attributo esatto.
Il selettore di attributo semplice
Il selettore di attributo semplice formattano tutti quegli elementi che hanno un tipo di attributo al di là del loro valore.
Se vogliamo che tutti i paragrafi abbiano un colore arancio ma allo stesso tempo ogni paragrafo deve avere diversi font possiamo usare il selettore di attributo semplice e le varie classi applicate al tag <p>. Vediamo come con l’esempio:
Css:
p[class]{
color: #FF9900;/*colore arancio*/
}
p.kiwi{
}
p.arancio{
font-family: “Courier New”, Courier, monospace;
}
p.banana{
font-family: Verdana, Arial, Helvetica, sans-serif;
}
Xhtml:
<p class=”kiwi”>Questo è un paragrafo con calsse kiwi.</p>
<p class=”arancio”>Questo è un paragrafo con calsse arancio.</p>
<p class=”banana”>Questo è un paragrafo con calsse banana.</p>
Il risultato sarà questo:
Il primo paragrafo a cui è applicata la classe .kiwi usa il font di default della pagina che è Trebuchet Ms; il secondo, .arancio, usa la famiglia di font Courier New”, Courier e monospace; il terzo, .banana, invece usa la famiglia capeggiata da Verdana.
Come si vede nell’esempio tutti i paragrafi sono color arancione, avrei potuto semplicemente scrivere p {
color: #FF9900;} e automaticamente tutti i paragrafi si sarebbero formattati con quel colore, ma se non volessi tutti i paragrafi del documento arancioni questa soluzione è utile, certo agli altri paragrafi non dovrò applicare nessuna classe perchè se no il selettore di attributo mi colorerà quel paragrafo di arancione.
Selezione basata su un valore di attributo esatto
Per andare a formattare quegli elementi che hanno un determinato valore di attributo si usa questo tipo di selezione, vediamo l’esempio.
Css:
a[href=”http://www.pikadilly.it”]{
color: #FF9999;
}
Xhtml:
<a href=”http://www.pikadilly.it”>Blog</a>
L’attribuo herf ha come valore l’indirizzo del mio blog, nel css ho scritto che ogni tag a con attributo href con valore l’indirizzo del mio blog deve cololare il link di rosa pallido.
Come nell’immagine:
Allo stesso tempo voglio però che altri link che rimandano al mio blog siano di colore arancio pallido, allora mi servirò anche dell’attributo title per formattare le altre ancore, in questo modo:
Css:
a[href=”http://www.pikadilly.it”][title=”Il mio blog”]{
color: #FFCC33;
}
xhtml:
<a href=”http://www.pikadilly.it” title=”il mio blog”>Blog</a>
Così dico al css di andarmi a colorare di arancio pallido tutti quei link che hanno come attributo herf con l’indirizzo del mio sito e l’attributo title con la dicitura “il mio blog”.
Se vogliamo applicare anche le pseudoclassi :visited, :active e :hover basterà dichiarare questo nel css:
a:hover[href=”http://www.pikadilly.it”][title=”il mio blog”]{
color: #FF3300;
}
o
a[href=”http://www.pikadilly.it”][title=”il mio blog”]:hover{
color: #FF3300;
}
Funziona sia mettendo :hover dopo le parentesi che contengono gli attributi o prima.
Questi tipi di selettori funzionano sia con l’ultima versione di IE, con Firefox (of course), Opera e Safari per windows.
Per vedere questi selettori in azione ecco l’esempio pratico: