MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

Selectors d'Atribut

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

Sumari

Els selectors d'atributs, selecciona un element mitjançant la presència d'un determinat atribut o valor d'atribut.

[attr]
Representa un element amb un nom d'atribut attr.
[attr=value]
Representa un element amb un nom d'atribut attr i el valor és exactament el "value".
[attr~=value]
Representa un element amb un nom d'atribut attr que el seu valor és una llista de paraules separades per espais en blanc, una de les quals és exactament el "value".
[attr|=value]
Representa un element amb un nom d'atribut attr. El seu valor pot ser exactament "value" o pot començar amb "value" seguit immediatament per "-" (U+002D). Es pot utilitzar per a coincidències de subcodi d'idioma.
[attr^=value]
Representa un element amb un nom d'atribut attr i que el seu primer valor és el prefix "value".
[attr$=value]
Representa un element amb un nom d'atribut attr i que el seu últim valor és el sufix "value".
[attr*=value]
Representa un element amb un nom d'atribut attr i que el seu valor conté almenys una ocurrència de cadena "value" com subcadena.
[attr operator value i]
L'addició d'un i (o I) abans del parèntesi de tancament fa que el valor sigui comparat sense majúscules (per a caràcters dins del rang ASCII).

Exemple

/* All spans with a "lang" attribute are bold */
span[lang] {font-weight:bold;}
 
/* All spans in Portuguese are green */
span[lang="pt"] {color:green;}

/* All spans in US English are blue  */
span[lang~="en-us"] {color: blue;}

/* Any span in Chinese is red, matches
   simplified (zh-CN) or traditional (zh-TW) */
span[lang|="zh"] {color: red;}

/* All internal links have a gold background */
a[href^="#"] {background-color: gold;}

/* All spans whose first declared class begins with "main" have a yellow background */
/* Span with the class="banner main" would not be affected. */
span[class^="main"] {background-color: yellow;}

/* All links to urls ending in ".cn" are red */
a[href$=".cn"] {color: red;}

/* All links with "example" in the url have a grey background */
a[href*="example"] {background-color: #CCCCCC;}

/* All email inputs have a blue border */
/* This matches any capitalization of
   "email", e.g. "email", "EMAIL", "eMaIL", etc. */
input[type="email" i] {border-color: blue;}
<div class="hello-example">
    <a href="http://example.com">English:</a>
    <span lang="en-us en-gb en-au en-nz">Hello World!</span>
</div>
<div class="hello-example">
    <a href="#portuguese">Portuguese:</a>
    <span lang="pt">Olá Mundo!</span>
</div>
<div class="hello-example">
    <a href="http://example.cn">Chinese (Simplified):</a>
    <span lang="zh-CN">世界您好!</span>
</div>
<div class="hello-example">
    <a href="http://example.cn">Chinese (Traditional):</a>
    <span lang="zh-TW">世界您好!</span>
</div>

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ó entre 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

Característica Chrome Firefox (Gecko) Internet Explorer Opera Safari
Suport bàsic (Yes) 1.0 (1.7 or earlier) 7 9 3
Modificador insensible a majúscules i minúscules 49.0 47.0 (47.0) ? ? 9
Característica Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile Chrome for Android
Suport bàsic ? (Yes) 1.0 (1) ? ? ? (Yes)
Modificador insensible a majúscules i minúscules ? 49.0 47.0 (47.0) ? ? 9 49.0

Veure

Document Tags and Contributors

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