Selector Atribut

El selector attribute CSS coincideix amb elements basats en la presència o el valor d'un atribut donat.

/* <a> elements amb l'atribut title */
a[title] {
  color: purple;
}

/* elements <a> amb una coincidència href "https://example.org" */
a[href="https://example.org"] {
  color: green;
}

/* elements <a> amb un href contenint "example" */
a[href*="example"] {
  font-size: 2em;
}

/* elements <a> amb un href amb una terminació ".org" */
a[href$=".org"] {
  font-style: italic;
}
[attr]
Representa un element amb un nom d'atribut attr.
[attr=value]
Representa un element amb un nom d'atribut attr el valor del qual és exactament value.
[attr~=value]
Representa un element amb un nom d'atribut attr el valor del qual és una llista de paraules separades per espais en blanc, una de les quals és exactament value.
[attr|=value]
Representa un element amb un nom d'atribut attr el valor del qual pot ser exactament value o pot començar amb value immediatament seguit d'un guió, - (U+002D). Sovint s'utilitza per coincidències de subcodis de llenguatge.
[attr^=value]
Representa un element amb un nom d'atribut attr el valor del qual està prefixat (precedit) per value.
[attr$=value]
Representa un element amb un nom d'atribut attr el valor del qual és sufix (següit) per value.
[attr*=value]
Representa un element amb un nom d'atribut attr el valor del qual conté almenys una ocurrència value dins de la cadena.
[attr operator value i]
En afegir una i (o I) abans del claudàtor de tancament, el valor es compara entre majúscules i minúscules (per a caràcters dins del rang ASCII).

Exemples

CSS

a {
  color: blue;
}

/* Internal links, beginning with "#" */
a[href^="#"] {
  background-color: gold;
}

/* Links with "example" anywhere in the URL */
a[href*="example"] {
  background-color: silver;
}

/* Links with "insensitive" anywhere in the URL,
   regardless of capitalization */
a[href*="insensitive" i] {
  color: cyan;
}

/* Links that end in ".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>

Resultat

Llengües

CSS

/* Tots els divs amb un atribut `lang` són en negreta. */
div[lang] {
  font-weight: bold;
}

/* Tots els divs en US Anglès són blaus. */
div[lang~="en-us"] {
  color: blue;
}

/* Tots els divs en Portuguès són verds. */
div[lang="pt"] {
  color: green;
}

/* Tots els divs en Xinès són vermells, ja sigui
   simplificat (zh-CN) o tradicional (zh-TW). */
div[lang|="zh"] {
  color: red;
}

/* Tots els divs en Xinès Traditional
   `data-lang` són porpra */
/* Nota: També podeu utilitzar atributs amb guions sense cometes dobles */
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>

Resultat

Especificacions

Especificació Estat Comentari
Selectors Level 4
The definition of 'attribute selectors' in that specification.
Working Draft Afegit modificador per a la selecció del valor d'atribut ASCII sense distinció de majúscules i minúscules.
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 Definició inicial

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help! (en-US)

Descripció Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Suport bàsic (Yes) (Yes) 1.0 (1.7 or earlier) 7 9 3
Modificador sense distinció de majúscules i minúscules 49.0 No support 47.0 (47.0) ? 36 9
Descripció Android Chrome for Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile Chrome for Android
Suport bàsic ? (Yes) (Yes) 1.0 (1) ? ? ? (Yes)
Modificador sense distinció de majúscules i minúscules ? 49.0 No support 47.0 (47.0) ? ? 9 49.0