Los selectores de atributo nos permiten dar estilos particulares a un elemento según el valor de un determinado atributo. Por ejemplo, en la Wikipedia, se utilizan selectores de atributo de CSS 3 para diferenciar los enlaces externos del resto mediante un icono.

El mismo método he utilizado en este blog, sólo que solamente lo verán los usuarios que utilicen Firefox, ya que, aunque Explorer 7 reconoce algunos de estos selectores, no se le da muy bien poner una imagen de fondo a la derecha de un enlace cuando éste se muestra en dos líneas, como se puede ver en la siguiente captura de pantalla.

La sintaxis de los selectores de atributo es la siguiente:

elemento[atributo=valor] {propiedad: valor;}

Selectores de atributo de CSS 2.1

A continuación muestro algunos usos de estos selectores, aunque en la mayoría de casos sólo se podrán beneficiar de ellos los usuarios de Firefox.

Diferenciar los enlaces externos del resto

En CSS 3 se amplían las posibilidades de selección de atributos, por ejemplo, permitiendo seleccionar aquellos que empiecen por un determinado valor mediante el siguiente selector:

elemento[atributo^=valor]

Así podremos seleccionar primero, todos los enlaces cuyo valor para el atributo href comience por “http:” y aplicarles un estilo con la imagen de fondo que indica que se trata de un enlace externo. En el caso de que tengamos rutas absolutas a nuestro sitio, tendremos que seleccionar después los enlaces cuyo valor para el atributo href comience por http://midominio.com

Ejemplo de código:

a[href^="http:"] {
background: url(images/externalLink.gif) no-repeat right top;
padding-right: 1em;
}

a[href^="http://www.midominio.com"],
a[href^="http://midominio.com"] {
background-image: none;
padding-right: 0;
}

Indicar el tipo de documento al que se enlaza

Si todos los navegadores soportaran este tipo de selectores, podríamos olvidarnos de dar una clase para los enlaces que abran un documento .pdf o .doc, por ejemplo. El siguiente selector selecciona la terminación de un valor de atributo:

elemento[atributo$=.valor]

Podríamos poner un icono apropiado mediante CSS a los enlaces que lleven a un documento acabado en .pdf, .doc, .rss, etc

Ejemplo de código:

a[href$=".pdf]{
background: url(images/ico-pdf.gif) no-repeat right top;
padding-right: 1em;
}

Indicar qué enlaces llevan a páginas en inglés.

Para el siguiente código html:

<a href="http://www.amazon.com” hreflan=”en”>Amazon</a>

Podríamos usar este código CSS para indicar que la página está en inglés:

a[hreflang="en"]:after{
content: "[EN]";
padding-right: 1em;
}

Dar un determinado estilo a campos de formulario excepto a los botones de enviar.

Mediante el siguiente código CSS seleccionaríamos los input de tipo submit para darles un estilo distinto al de los input text:

input[type="submit"] { atributo: valor;}