Todos sabemos que las etiquetas en HTML pueden tener atributos tales como alt, title, href etc… Aparte de para lo obvio estos atributos nos pueden servir para dar especificidad a nuestros selectores CSS. Los llamados selectores de atributo, son unos selectores avanzados y escasamente conocidos, capaces de identificar estos atributos de un elemento y pasarles un estilo. Con ellos nos podríamos librar de por ejemplo, poner clases e identificadores a muchas etiquetas HTML.

Existen un número reducido de selectores de atributo en CSS2, pero éstos se han ampliado para la próxima versión de CSS3. En este artículo veremos cuantos tipos de selectores de atributo hay y la mejor manera de utilizarlos.

Selectores por atributos en CSS2 (no funcionan en ie6)

  • etiqueta[atributo]: Los estilos se aplicarán a todas las etiquetas que tengan ese atributo. 

    1
2
3
4

    <!--HTML-->
<abbr title="Cascading Style Sheets">CSS</abbr>
<!--CSS-->
abbr[title] {color: #666;border-bottom: 1px dotted #666;}

  • etiqueta[atributo=valor]: Se aplicará a los estilos de todos las etiquetas que tengan ese atributo con ese valor. 

    1
2
3
4
5
6

    <!--HTML-->
<label for="nombre">Nombre</label>
<input type="text" id="nombre" />
<input type="submit" value="Enviar" />
<!--CSS-->
input[type="text"] {width: 200px;}

  • etiqueta[atributo~=valor]: El estilo se aplicará a las etiquetas que tengan ese atributo y que uno de sus valores separados por espacios sea el valor: 

    1
2
3
4
5

    <!--HTML-->
<a href="#" title="Abre PDF ">Descargar<a>
<a href="#" title="descargar">El selector de atributo no se aplicará en este enlace</a>
<!--CSS-->
a[title~=PDF]{background:url(img/pdf.gif) no-repeat center right}
  • etiqueta[atributo|=valor]: Se aplican los estilos a todas las etiquetas que tengan ese atributo y que sea igual a valor o a valor seguido de un guíon. Este tipo de selector es útil para los atributos de tipo lang que indican el idioma del contenido del elemento. 

    1
2
3
4

    <!--HTML-->
<span lang="en">Windows</span>
<!--CSS-->
*[lang|="es"] { color : red }

Selectores de atributos en CSS3 (no funcionan en ie6)

Los navegadores Standard, ya incluyen soporte para varios o casi todos los selectores de CSS3, por lo tanto los selectores que veremos a continuación funcionaran correctamente en Opera, Safari, firefox y Chrome. Según la Microsoft Developer Network de Microsoft, estos selectores son compatibles en Internet Explorer 7 y 8.

A este respecto, existe una herramienta muy útil llamada CSS Selectors test que permite comprobar los selectores que soporta el navegador con el que se hace la prueba.

  • elemento[atributo^="valor"]: Se seleccionan todos los elementos que tienen este atributo y cuyo valor comienza por la cadena de texto indicada. 

    1
2
3
4
5

    <!--HTML-->
<a href="http://www.circulodemaquetadores.com/" >este enlace tendrá un color gris</a>
<a href="#" >El selector de atributo no se aplicará en este enlace </a>
<!--CSS-->
a[href^=http://] {color:#ccc}

  • elemento[atributo$="valor"]: selecciona todos los elementos que disponen de ese atributo y cuyo valor termina exactamente por la cadena de texto indicada. Este selector es muy útil para agregar un icono diferente al lado de cada tipo de archivo que tu sitio web enlace. De este modo, los usuarios de tu sitio sabrán cuándo obtendrá una imagen, un archivo PDF o un documento de Word, aumentando así la usabilidad de tu web. 

    1
2
3
4
5

    /*CSS*/
a[href$=".jpg"] {background: url(jpeg.gif) no-repeat left 50%;padding: 2px 0 2px 20px;}
a[href$=".pdf"] {background: url(pdf.gif) no-repeat left 50%;padding: 2px 0 2px 20px;}
a[href$=".doc"] {background: url(word.gif) no-repeat left 50%;padding: 2px 0 2px 20px;}
a[href$=".swf"] {background: url(flash.gif) no-repeat left 50%;padding: 2px 0 2px 20px;}

  • elemento[atributo*="valor"]: Se aplica a todos los elementos que disponen de ese atributo y cuyo valor contiene la cadena de texto indicada. 

    1
2
3
4
5
6

    <!--HTML-->
<p title="home">El selector de atributo no se aplicará en este párrafo </p>
<p title="contact">Este párrafo tendrá un tamaño de fuente de 1.2em y negrita</p>
<p title="house"> El selector de atributo no se aplicará en este párrafo</p>
<!--CSS-->
p[title*="ont"] {font-size:1.2em; font-weight:bold}