[attributo]

Ci sono vari sistemi per selezionare un elemento in CSS. Il sistema più semplice è utilizzando il tag, per esempio p { } o h1 { }. Per andare più nello specifico possono essere utilizzate le Classi e gli ID, entrambe attributi di un elemento specificati nel codice HTML. Tuttavia è possibile utilizzare un qualsiasi attributo dell’elemento come selettore per esso.

La sintassi per selezionare un elemento con un suo qualsiasi attributo è la seguente:

a[href="http://www.gbfactory.it"] {
  color: yellow;
}

Questa è un selettore di corrispondenza esatta (exact match), che seleziona solamente sui link con l’esatto valore dell’attributo href specificato, in questo caso http://gbfactory.it.

Le diverse tipologie

Il selettore per attributo di default distingue tra lettere maiuscole e minuscole, e l’attributo viene inserito tra parentesi quadre [ ].

Esistono sette diverse tipologie di corrispondenze che possono essere effettuate con un selettore di attributi, e la sintassi è diversa per ciascuno di essi.

Ogni selettore di attributi si basa sulla sintassi del selettore di corrispondenza esatta: tutti iniziano con il nome dell’attributo e terminano con un segno di uguale seguito dal valore dell’attributo desiderato, solitamente indicato tra virgolette.

Ciò che va tra il nome dell’attributo e il segno di uguale è ciò che fa la differenza tra i selettori.

[data-value] {
  /* L'attributo è presente */
}

[data-value="pippo"] {
  /* L'attributo ha l'esatto valore specificato */
}

[data-value*="pippo"] {
  /* L'attributo contiene il valore specificato da qualche parte all'interno di esso */
}

[data-value~="pippo"] {
  /* L'attributo ha il valore specificato all'interno di una lista separata da spazi */
}

[data-value^="pippo"] {
  /* L'attributo inizia con la stringa specificata */
}

[data-value|="pippo"] {
  /* L'attributo inizia con la stringa specificata in una lista separata da trattini */
}

[data-value$="pippo"] {
  /* L'attributo finisce con la stringa specificata */
}

Contiene il valore: la stringa specificata è contenuta all’interno del valore dell’attributo come unico valore, come valore in un elenco di valori o come parte di un altro valore. Per utilizzare questo selettore, aggiungi un asterisco (*) prima del segno di uguale. Ad esempio, img[alt*="foto"] selezionerà tutte le immagini che contengono nell’attributo alt la parola foto, come per esempio “foto di un gatto” ma anche “mostra fotografica”, perché il valore “foto” è contenuto in entrambe gli alt.

Il valore è in un elenco separato da spazi: la stringa specificata è l’unico valore di attributo o è un valore inserito in un elenco di valori separati da spazi. A differenza del selettore “contiene“, questo selettore non cercherà il valore come un frammento di parola. Per utilizzare questo selettore è necessario aggiungere un tilde (~) prima del segno di uguale. Ad esempio, img[alt~="foto"] selezionerà le immagini con il testo alt impostato a “foto di gatti” e ” mostra di foto“, ma non “mostra di fotografia d’epoca” (che il selettore “contiene” avrebbe invece selezionato).

Il valore inizia con: il valore dell’attributo inizia con la stringa inserita. Per utilizzare questo selettore, bisogna aggiungere un accento circonflesso (^) prima del segno di uguale. Non dimenticare che la distinzione tra maiuscole e minuscole è importante. Ad esempio, img[alt^=”foto”] selezionerà le immagini con il testo alternativo impostato a “foto di un gatto” e “fotografia in bianco e nero”, ma non funzionerà con “Fotografo” perché la parola inizia con una lettera maiuscola.

Il valore è il primo in un elenco separato da trattini: questo selettore è molto simile al selettore “inizia con“. Qui, il selettore corrisponde a un valore che è l’unico valore o è il primo in un elenco di valori separati da trattini. Per utilizzare questo selettore, aggiungi un carattere pipe (|) prima del segno di uguale. Ad esempio, img[data-soggetti|="gatto"] selezionerà le immagini con data-soggetti impostato, per esempio a “gatto-cane-tartaruga“, ma non l’immagine che ha come data-soggetti un valore di “cane-gatto-pesce“.

Il valore termina con: il valore dell’attributo termina con il termine selezionato. Per utilizzare questo selettore, aggiungi un segno di dollaro ($) prima del segno di uguale. Per esempio, a[href$=".pdf"] seleziona tutti i link che portano ad un URL che termina con .pdf.

Dato che i valori vengono trattati come stringhe, non è necessario eseguire l’escape dei caratteri per farli corrispondere, che sarebbe invece necessario nel caso si utilizzassero caratteri speciali in una classe o ID.

[class="C*a!s||^ =W? s £d/*-5 e"] {
  text-size: 150px;
}

Corrispondenza non case-sensitive

Come accennato in precedenza, le stringhe dei valori degli attributi fanno distinzione tra maiuscole e minuscole, ma questo comportamento può essere modificato per fare in modo che il selettore non distingua tra maiuscole e minuscole. Per fare questo dobbiamo aggiungere la lettere i prima della parentesi quadra di chiusura, in questo modo:

[attribute="valore" i] {
  /* regole css */
}

La corrispondenza senza distinzione tra maiuscole e minuscole potrebbe essere utile per selezionare attributi il cui contenuto è imprevedibile, per esempio scritto da persone. Ad esempio, potremmo voler cambiare il colore di ogni paragrafo che contenga la scritta “GB FACTORY”, che tuttavia potrebbe venir scritta con lettere sia maiuscole che minuscole. È possibile farlo utilizzando solo CSS, con il selettori così impostato senza distinzione tra maiuscole e minuscole per selezionare tutte le possibili variazioni:

Combinare più selettori

È possibile combinare un selettori di attributi con altri selettori, come Tag, Classi o ID. Possono essere anche combinati più selettori di attributi insieme, come è visibile nell’ultimo dei seguenti esempi:

div[attribute="valore"] {
  /* regole css */
}

.elemento[attribute="valore"] {
  /* regole css */
}

#testo[attribute="valore"] {
  /* regole css */
}

img[alt~="gatto"][src*="catimages.com"] {
  /* regole css */
}

Selettori di attributi in JavaScript e in jQuery

I selettori di attributi possono essere utilizzati in jQuery come avviene per qualsiasi altro selettore CSS. In JavaScript vanilla possono essere utilizzati con document.querySelector() e document.querySelectorAll().