Please note, this is a STATIC archive of website developer.mozilla.org from November 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

Selectores de atributo

Resumen

Los selectores de atributo seleccionan un elemento usando un atributo especificado o el valor del mismo.

[atrib]
Selecciona los elementos que tienen el atributo atrib.
[atrib=val]
Selecciona los elementos cuyo atributo atrib tenga exactamente el valor val.
[atrib~=val]
Selecciona los elementos cuyo atributo atrib tenga por valor una lista de palabras separadas por espacios, una de las cuales sea val.
[atrib|=val]
Selecciona los elementos cuyo atributo atrib tenga exactamente el valor val o empiece por val seguido de un guión (“-” U+002D). Se puede usar para coincidencias de subcódigos en otros idiomas.
[atrib^=val]
Selecciona los elementos cuyo atributo atrib tenga un valor empezado por val.
[atrib$=val]
Selecciona los elementos cuyo atributo atrib tenga un valor terminado por val.
[atrib*=val]
Selecciona los elementos cuyo atributo atrib tenga un valor que contenga val.

Ejemplo

/* Todos los span con el atributo "lang" en negrita */
span[lang] {font-weight:bold;}
 
/* Todos los span en portugués en verde */
span[lang="pt"] {color:green;}

/* Todos los span en inglés americano en azul  */
span[lang~="en-us"] {color: blue;}

/* Cualquier span en chino en rojo, selecciona chino simplificado (zh-CN) y tradicional (zh-TW) */
span[lang|="zh"] {color: red;}

/* Todos los enlaces internos con el fondo dorado */
a[href^="#"] {background-color:gold}

/* Todos los enlaces cuya URL acabe en ".cn" en rojo */
a[href$=".cn"] {color: red;}

/* Todos los enlaces cuya URL contenga "example" con el fondo gris */
a[href*="example"] {background-color: #CCCCCC;}
<div class="hello-example">
    <a href="https://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="https://example.cn">Chinese (Simplified):</a>
    <span lang="zh-CN">世界您好!</span>
</div>
<div class="hello-example">
    <a href="https://example.cn">Chinese (Traditional):</a>
    <span lang="zh-TW">世界您好!</span>
</div>

Especificaciones

Especificación Estado Comentario

Selectores CSS de nivel 3
(CSS Selectors Level 3)

(en inglés)

Recommendation  
CSS 2.1 (en inglés) Recommendation  
CSS 1 (en inglés) Recommendation  

Soporte de los navegadores

Característica Chrome Firefox (Gecko) Internet Explorer Opera Safari
Soporte básico (Yes) 1.0 (1.7 or earlier) 7 9 3
Característica Android Chrome para Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Soporte básico ? ? 1.0 (1) ? ? ?

Referencias

Etiquetas y colaboradores del documento

 Colaboradores en esta página: teoli, jota1410
 Última actualización por: teoli,