I selettori attributo sono stati introdotti con i CSS2 per poi essere estesi con i CSS3, e sono ormai supportati da tutti i principali browser (non sono supportati da IE6 e precedenti in questo caso dare un’occhiata a questo mio precedente articolo IE9.js).
Come riportato nelle specifiche del W3C i selettori di attributo deve essere considerati per matchare un elemento se tale elemento ha un attributo corrispondente all’attributo rappresentato dal selettore attributo. In parole povere andranno a matchare gli elementi in base al valore dei loro attributi.
Con i CSS2 erano stati introdotti 4 tipi di selettori attributo:
[att]
Sintassi: [att]
Rappresenta un elemento con l’attributo att, indipendentemente dal valore dell’attributo (anche vuoto). Consideriamo il seguente selettore:
a[title] {color:green}
ed il seguente snippet di markup
link1 link2 link3
I primi due elementi a saranno di colore verde mentre il terzo no. Un altro classico esempio potrebbe essere l’intenzione di selezionare tutti i links ma non le ancore. Per raggiungere lo scopo potremo usare il selettore attributo:
a[href]
in questo caso il seguente elemento ancora non sarà matchato: <a name="top">
[att=val]
Sintassi: [att="val"]
Rappresenta un elemento con l’attributo att che è esattamente uguale a val. Consideriamo i seguenti selettori attributo:
div[class="footer"] span[prov="toscana"][citta="firenze"]
Il primo selettore matcherà tutti i div con classe uguale a footer. Con il secondo abbiamo introdotto anche il concetto di selettori attributo multipli, difatti il selettore corrisponderà a tutti gli span con l’attributo prov uguale a toscana e l’attributo citta uguale a firenze.
Attenzione il valore dell’attributo dovrà essere esattamente uguale, carattere per carattere, a quello indicato nel selettore. Per esempio un elemento con classe uguale a mioFooter non sarà matchato dal precedente selettore. Consideriamo dunque questo selettore:
a[href="http://w3.org/"] {font-style: bold;}
e questo frammento HTML (anche se non ha nessun senso):
W3C w3c
Entrambi i links punteranno il sito del W3C, ma soltanto il primo sarà selezionato. Ripeto, la corrispondenza deve essere esatta!
[att~=val]
Sintassi: [att~="val"]
Rappresenta un elemento con l’attributo att il cui valore è una lista di parole separate da uno spazio bianco, una delle quali è esattamente val. Se val contiene spazi bianchi, il selettore non matcherà mai nulla (dato che le parole sono separate da spazi). Anche se val è una stringa vuota, il selettore non matcherà mai nulla. Visto che oggi sono un po’ svogliato come esempio “rubo” direttamente quello delle specifiche:
a[rel~="copyright"] { ... }
a[href="http://www.w3.org/"] { ... }
Le precedenti regole CSS ci mostrano con chiarezza la differenza tra “=” e “~=”. Il primo selettore matcherà per esempio un elemento a con attributo rel uguale a “copyright copyleft copyeditor“. Il secondo invece matcherà un elemento a con attributo href avente esattamente come valore: “http://www.w3.org/”.
[att|=val]
Sintassi: [att|="val"]
Rappresenta un elemento con attributo att il cui valore sia esattamente val oppure che inizi con val seguito poi da un “-“. Questo selettore attributo (scarsamente usato) è stato introdotto principalmente per matchare attributi che contengono un codice di linguaggio con un eventuale sottocodice (es. attributo hreflang di un link). Esempio:
a[hreflang|="en"] {color: aqua;}
link1 link2 ma che lingua è???
Il terzo links, ha un codice linguistico totalmente inventato solo per scopo didattico, per dimostrare che viene presa in considerazione solo la parola iniziale tra quelle separate dal trattino.
[att^=val]
Sintassi: [att^="val"]
Questo selettore, ed i due che seguiranno, sono stati introdotti con i CSS3. Si tratta di selettori che permettono di estendere la selezione di elementi alle sottostringhe presenti nei valori dei loro attributi. Il selettore in questione, rappresenta un elemento con l’attributo att il cui valore inizia con il prefisso val. Se val è una stringa vuota, il selettore non matcherà niente.
input[name^="news"]
Dei seguenti tre campi input i primi due corrisponderanno al selettore precedente, mentre il terzo no, visto che il valore del suo attributo name non inizia per news.
[att$=val]
Sintassi: [att$="val"]
Rappresenta un elemento con l’attributo att il cui valore termina con il suffisso val. Se val è una stringa vuota, il selettore non matcherà niente.
input[name$="letter"]
Dei seguenti tre campi di input, soltanto i primi due corrisponderanno al selettore visto che il valore del loro attributo name termina per letter.
[att*=val]
Sintassi: [att*="val"]
Rappresenta un elemento con l’attributo att il cui valore è un’istanza delle stringa val, ovunque questa si trovi. Se val è una stringa vuota il selettore non corrisponderà a niente.
Questo selettore e molto simile, anche se ancora più generoso nel matiching, al selettore “contiene la parola” ([att~=val]) che abbiamo visto in precedenza, e che spesso risulta, più appropriato:
input[name*="man"]
Dei seguenti quattro campi input, i primi tre corrisponderanno al selettore visto che il valore del loro attributo name contiene la sottostringa man.
Tips
-
Il lettore più attento avrà cero notato che con i selettori attributo possiamo riprodurre fedelmente i selettori di classe (anche se probabilmente ha poco senso farlo), ma in questo caso quale selettore dobbiamo usare? Per esempio se volessimo emulare il seguente selettore di classe:
div.headerquale dei seguenti due selettori scegliereste?div[class="header"] div[class~="header"]
La risposta esatta è il secondo, perchè mentre il primo corrisponderà esclusivamente ad un elemento
divcon classe esattamente uguale ad header, il secondo matcherà anche il seguente elemento:<div class="wrap header">. -
Il selettore
[att$=val]risulta particolarmente indicato par matchare gli elementi che puntano a determinate risorse, andando quindi a testarne l’estensione. Per esempio potremmo voler applicare uno stile particolare a tutte le immagini di tipo PNG presenti sulla pagina, oppure a tutti i collegamenti ipertestuali che puntino a files PDF. Per raggiungere lo scopo possiamo usare i seguenti selettori attributo:img[src$=".png"] a[href$=".pdf"]
-
Un utilizzo comune del selettore
[att^=val]e quello, per esempio, di selezionare tutti i collegamenti ipertestuali che puntano a siti esterni, e che quindi avranno l’attributohrefche inizia con http:a[href^="http"]
Difatti i path assoluti per pagine interne non dovrebbero essere mai utilizzati, ma dovremmo usare sempre quelli relativi. Con questa tecnica possiamo matchare i links a Secure Socket Layer (
a[href^="https"]), oppure ad indirizzi di posta (a[href^="mailto"]). -
A volte l’utilizzo di selettori ID ci crea problemi visto che questi hanno una specificità superiore a qualsiasi altro tipo di selettore (eccetto quelli inline). Possiamo ovviare a questo inconveniente utilizzando i selettori attributo (proprio come abbiamo visto prima per le classi). I seguenti due selettori raggiungeranno il solito scopo con la differenza che il primo avrà una specificità di 0,1,0,1 mentre il secondo di 0,0,1,1.
div#side {background-color: #CCC} div[id="side"] {background-color: #CCC}Teniamo a mente questo concetto, perchè potrebbe ritornarci utile 😉