Attribute selectors

Il selettore di attributo CSS corrisponde agli elementi in base alla presenza o al valore di un dato attributo.

/* Elemento <a> con un attributo title */
a[title] {
  color: purple;
}

/* Elemento <a> con un href uguale a "https://example.org" */
a[href="https://example.org"] {
  color: green;
}

/* Elemento <a> con un href contenente "example" */
a[href*="example"] {
  font-size: 2em;
}

/* Elemento <a> con un href che finisce con ".org" */
a[href$=".org"] {
  font-style: italic;
}

/* Elemento <a> il cui attributo classe contiene la parola "logo" */
a[class~="logo"] {
  padding: 2px;
}

Sintassi

[attr]
Rappresenta elementi con un nome di attributo attr.
[attr=value]
Rappresenta elementi con un nome di attributo attr il cui valore è esattamente value.
[attr~=value]
Rappresenta elementi con un nome di attributo attr il cui valore è una lista di parole separate da spazi, una delle quali è esattamente value.
[attr|=value]
Rappresenta elementi con un nome di attributo attr il cui valore può essere esattamente value o può iniziare con value immediatamente seguito da un trattino, - (U+002D). È spesso usato per corrispondenze di subcode di linguaggio.
[attr^=value]
Rappresenta elementi con un nome di attributo attr il cui valore è il prefisso (è preceduto da) di value.
[attr$=value]
Rappresenta elementi con un nome di attributo attr il cui valore è il suffisso (è seguito da) di value.
[attr*=value]
Rappresenta elementi con un nome di attributo attr il cui valore contiene almeno una presenza di value all'interno della stringa.
[attr operator value i]
Aggiungere una i (o I) prima della parentesi di chiusura fa sì che il valore sia comparato senza distinzione tra maiuscole e minuscole (per caratteri entro il range ASCII).
[attr operator value s]
Aggiungere una s (o S) prima della parentesi di chiusura fa sì che il valore sia comparato con sensibilità alle maiuscole ( per caratteri entro il range ASCII).

Esempi

CSS

a {
  color: blue;
}

/* Link interni che iniziano con "#" */
a[href^="#"] {
  background-color: gold;
}

/* Link con "example" in qualsiasi punto dell'URL */
a[href*="example"] {
  background-color: silver;
}

/* Link con "insensitive" in qualsiasi punto dell'URL,
   a prescindere dalla capitalizzazione*/
a[href*="insensitive" i] {
  color: cyan;
}

/* Link con "cAsE" in qualsiasi punto dell'URL, 
con precisa capitalizzazione */ 
a[href*="cAsE" s] { 
  color: pink; 
}

/* Link che finiscono con ".org" */
a[href$=".org"] {
  color: red;
}

HTML

<ul>
  <li><a href="#internal">Internal link</a></li>
  <li><a href="http://example.com">Example link</a></li>
  <li><a href="#InSensitive">Insensitive internal link</a></li>
  <li><a href="http://example.org">Example org link</a></li>
</ul>

Risultato

Linguaggi

CSS

/* Tutti i div con attributo `lang` sono bold. */
div[lang] {
  font-weight: bold;
}

/* Tutti i div senza un attributo `lang` sono italicized. */
div:not([lang]) {
  font-style: italic;
}

/* Tutti i div in Inglese US sono blu. */
div[lang~="en-us"] {
  color: blue;
}

/* Tutti i div in Portoghese sono verdi. */
div[lang="pt"] {
  color: green;
}

/* Tutti i div in Cinese sono rossi, sia che siano 
   in cinese semplificato (zh-CN) o tradizionale (zh-TW). */
div[lang|="zh"] {
  color: red;
}

/* Tutti i div con un
   `data-lang` in Cinese tradizionale sono viola. */
/* Nota: Gli attributi con trattino possono essere usati 
  senza virgolette */ 
div[data-lang="zh-TW"] {
  color: purple;
}

HTML

<div lang="en-us en-gb en-au en-nz">Hello World!</div>
<div lang="pt">Olá Mundo!</div>
<div lang="zh-CN">世界您好!</div>
<div lang="zh-TW">世界您好!</div>
<div data-lang="zh-TW">世界您好!</div>

Risultati

Liste ordinate HTML

La specifica HTML richiede che l'attributo type venga definito senza distinzione maiuscole-minuscole poiché esso è principalmente usato in elementi HTML <input>, provare ad usare selettori di attributo con l'attributo type di un ordered list non funziona senza il modificatore case-sensitive.

CSS

/* I tipi di lista richiedono un modificatore sensibile alle maiuscole a causa di una stranezza nel modo in cui l'HTML gestisce l'attributo type. */
ol[type="a"] {
  list-style-type: lower-alpha;
  background: red;
}

ol[type="a" s] {
  list-style-type: lower-alpha;
  background: lime;
}

ol[type="A" s] {
  list-style-type: upper-alpha;
  background: lime;
}

HTML

<ol type="A">
  <li>Example list</li>
</ol>

Risultato

Specifiche

Specifica Stato Commenti
Selectors Level 4
The definition of 'attribute selectors' in that specification.
Working Draft Aggiunge il modificatore per la selezione di valori ASCII case-sensitive e case-insensitive negli attributi.
Selectors Level 3
The definition of 'attribute selectors' in that specification.
Recommendation
CSS Level 2 (Revision 1)
The definition of 'attribute selectors' in that specification.
Recommendation Definizione iniziale

Compatibilità Browser

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
Attribute selector ([attr=value])Chrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 7Opera Full support 9Safari Full support 3WebView Android Full support ≤37Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 14Safari iOS Full support 1Samsung Internet Android Full support 1.0
Case-insensitive modifier (i)Chrome Full support 49Edge Full support 79Firefox Full support 47IE No support NoOpera Full support 36Safari Full support 9WebView Android Full support 49Chrome Android Full support 49Firefox Android Full support 47Opera Android Full support 36Safari iOS Full support 9Samsung Internet Android Full support 5.0
Case-sensitive modifier (s)Chrome No support No
Notes
No support No
Notes
Notes See bug 1041095.
Edge No support No
Notes
No support No
Notes
Notes See bug 1041095.
Firefox Full support 66IE No support NoOpera No support No
Notes
No support No
Notes
Notes See bug 1041095.
Safari No support NoWebView Android No support No
Notes
No support No
Notes
Notes See bug 1041095.
Chrome Android No support No
Notes
No support No
Notes
Notes See bug 1041095.
Firefox Android Full support 66Opera Android No support No
Notes
No support No
Notes
Notes See bug 1041095.
Safari iOS No support NoSamsung Internet Android No support No
Notes
No support No
Notes
Notes See bug 1041095.

Legend

Full support  
Full support
No support  
No support
See implementation notes.
See implementation notes.

Vedi anche