Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

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="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>

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,