We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

This translation is incomplete. Please help translate this article from English.

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!

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

Document Tags and Contributors

Contributors to this page: Legioinvicta
Last updated by: Legioinvicta,