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
(oI
) 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
Links
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 |
Navegadors compatibles
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 |