Ci sono molti modi per selezionare gli elementi in CSS. La selezione più semplice è in base al nome del tag, come p ( ). Quasi tutto ciò che è più specifico di un selettore di tag utilizza attributi classed IDentrambi selezionano questi attributi sugli elementi HTML. Ma classe IDnon sono gli attributi solo gli sviluppatori possono selezionare. Possiamo usare qualsiasi attributo di un elemento come selettori.
La selezione degli attributi ha una sintassi speciale. Ecco un esempio:
a(href="https://css-tricks.com") ( color: #E18728; )È un selettore di corrispondenza esatta che selezionerà solo i collegamenti con il hrefvalore dell'attributo esatto di "https://css-tricks.com".
I sette diversi tipi
I selettori di attributi fanno distinzione tra maiuscole e minuscole per impostazione predefinita (vedere la corrispondenza senza distinzione tra maiuscole e minuscole di seguito) e sono scritti tra parentesi ().
Esistono sette diversi tipi di corrispondenze che puoi trovare con un selettore di attributi e la sintassi è diversa per ciascuno. Ciascuno dei selettori di attributi più complessi si basa sulla sintassi del selettore di corrispondenza esatta: iniziano tutti con il nome dell'attributo e terminano con un segno di uguale seguito dal valore dell'attributo, solitamente 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) ( /* Attribute exists */ ) (data-value="foo") ( /* Attribute has this exact value */ ) (data-value*="foo") ( /* Attribute value contains this value somewhere in it */ ) (data-value~="foo") ( /* Attribute has this value in a space-separated list somewhere */ ) (data-value^="foo") ( /* Attribute value starts with this */ ) (data-value|="foo") ( /* Attribute value starts with this in a dash-separated list */ ) (data-value$="foo") ( /* Attribute value ends with this */ )Il valore contiene: il valore dell'attributo contiene un termine come unico valore, un 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*="art")selezionerà le immagini con il testo alternativo "arte astratta" e "atleta che inizia un nuovo sport", perché il valore "arte" è nella parola "inizio".
Il valore è in un elenco separato da spazi: il valore è l'unico valore dell'attributo o è un valore intero in un insieme 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, aggiungi una tilde (~) prima del segno di uguale. Ad esempio, img(alt~="art")selezionerà le immagini con il testo alternativo "arte astratta" e "mostra d'arte", ma non "atleta che inizia un nuovo sport" (che il selettore "contiene" selezionerebbe).
Il valore inizia con: il valore dell'attributo inizia con il termine selezionato. Per utilizzare questo selettore, aggiungi un accento circonflesso (^) prima del segno di uguale. Non dimenticare, la distinzione tra maiuscole e minuscole è importante. Ad esempio, img (alt = "art") selezionerà le immagini con il testo alternativo "mostra d'arte" e "motivo artistico", ma non un'immagine con il testo alternativo "Arthur Miller" perché "Arthur" 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, li(data-years|="1900")selezionerà gli elementi dell'elenco con un data-yearsvalore di "1900-2000", ma non l'elemento dell'elenco con un data-yearsvalore di "1800-1900".
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. Ad esempio, a(href$="pdf")seleziona ogni collegamento che termina con .pdf.
Una nota sulle virgolette: in alcune circostanze è possibile evitare virgolette attorno al valore, ma le regole per la selezione senza virgolette sono incoerenti tra browser. Le citazioni funzionano sempre, quindi se ti limiti a usarle puoi essere certo che il tuo selettore funzionerà.
Vedi i selettori degli attributi della penna di CSS-Tricks (@ css-tricks) su CodePen.
Curiosità: i valori sono trattati come stringhe, quindi non devi fare alcun escaping di caratteri per farli corrispondere, come faresti se usassi caratteri insoliti in un selettore di classe o ID.
(class="(╯°□°）╯︵ ┻━┻")( color: red; font-weight: bold; )Corrispondenza senza distinzione tra maiuscole e minuscole
I selettori di attributo senza distinzione tra maiuscole e minuscole fanno parte della specifica Selectors Level 4 del CSS Working Group. Come accennato in precedenza, le stringhe dei valori degli attributi fanno distinzione tra maiuscole e minuscole per impostazione predefinita, ma possono essere modificate in senza distinzione tra maiuscole e minuscole aggiungendo iappena prima della parentesi di chiusura:
(attribute="value" i) ( /* Styles here will apply to elements with: attribute="value" attribute="VaLuE" attribute="VALUE"… etc */ )La corrispondenza senza distinzione tra maiuscole e minuscole potrebbe essere davvero utile per il targeting di attributi che contengono testo imprevedibile scritto da persone. Ad esempio, supponi di disegnare un fumetto su un'app di chat e di voler aggiungere una "mano che saluta" a qualsiasi messaggio con il testo "ciao" in qualche forma. Puoi farlo solo con CSS, utilizzando un abbinamento senza distinzione tra maiuscole e minuscole per catturare tutte le possibili variazioni:
Vedi la corrispondenza dell'attributo CSS senza distinzione tra maiuscole e minuscole della penna di CSS-Tricks (@ css-tricks) su CodePen.
Combinandoli
Puoi combinare un selettore di attributi con altri selettori, come tag, classe o ID.
div(attribute="value") ( /* style rules here */ ) .module(attribute="value") ( /* style rules here */ ) #header(attribute="value") ( /* style rules here */ )O anche combinare più selettori di attributi. Questo esempio seleziona immagini con testo alternativo che include la parola "persona" come unico valore o un valore in un elenco separato da spazi e un srcvalore che include il valore "lorem":
img(alt~="person")(src*="lorem") ( /* style rules here */ )Vedi gli attributi combinati della penna e la selezione solo degli attributi di CSS-Tricks (@ css-tricks) su CodePen.
Selettori di attributi in JavaScript e jQuery
I selettori di attributi possono essere utilizzati in jQuery proprio come qualsiasi altro selettore CSS. In JavaScript, puoi utilizzare i selettori di attributi con document.querySelector()e document.querySelectorAll().
Vedi i selettori degli attributi della penna in JS e jQuery di CSS-Tricks (@ css-tricks) su CodePen.
Relazionato
- classe
- ID
Maggiori informazioni
- Il magro sui selettori di attributi
- Selettori di attributi in MDN
- Selettori di attributi nelle specifiche CSS del W3C
Supporto browser
| Cromo | Safari | Firefox | musica lirica | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Qualunque | Qualunque | Qualunque | Qualunque | 7+ | Qualunque | Qualunque |