Mediante los atributos CSS se permite aplicar estilos a elementos HTML dependiendo del contenido de sus atributos HTML.

Por último, una característica muy interesante de CSS es la posibilidad de aplicar estilos dependiendo del contenido de ciertos atributos de los elementos HTML. Existen varios formatos de atributos, derivados de las expresiones regulares:

Atributo Descripción
[href] El atributo href existe en la etiqueta.
[href="#"] El atributo href existe y su valor es igual al texto #.
[href*="emezeta"] El atributo href existe y su valor contiene el texto emezeta.
[href^="http://"] El atributo href existe y su valor comienza por http://.
[href$=".pdf"] El atributo href existe y su valor termina por .pdf (es un enlace a un PDF).
[class~="emezeta"] El atributo class contiene una lista de valores, que contiene emezeta.
[lang|="es"] El atributo lang contiene una lista de valores, donde alguno empieza por es-.

Atributo existente

Para empezar, podemos seleccionar los elementos que contengan un atributo concreto, como por ejemplo, los elementos con el atributo style:

[style] {
    background:green
}

Este ejemplo seleccionaría todos los elementos a los que se le ha insertado estilos CSS en el propio elemento HTML. Si el elemento no tiene un atributo style definido, no se le aplican los estilos.

Atributo con valor exacto

Podemos indicar el valor exacto que deben tener los atributos para que sean seleccionados. Para ello, simplemente utilizamos el = y escribimos el texto entre comillas dobles:

a[rel="nofollow"] {
    background:red
}

Este ejemplo selecciona los enlaces con el atributo rel a nofollow, o lo que es lo mismo, los enlaces que indican a Google que no sean seguidos, y les establece un fondo de color rojo.

Atributo contiene texto

En lugar de un valor específico, también podemos indicar un fragmento de texto que debe estar incluído, y que así case con varias coincidencias:

a[href*="emezeta"] {
    background-color:orange;
}

Observese la siguiente tabla, donde se pueden ver varios elementos que se seleccionarían:

Etiqueta Valor del atributo href ¿Seleccionado?
<a> http://www.emezeta.com/
<a> http://www.emezeta.com/articulos/apogee-software-y-sus-videojuegos-de-los-90
<a> http://www.google.com/ No
<a> http://www.google.com/search?q=emezeta
<a> emezeta
<link> http://www.emezeta.com/index.css No

De la misma forma, el comparador ~= permite seleccionar palabras (separadas por espacios), en lugar de fragmentos de texto como lo hace el comparador *=.

Comienzo o final de un atributo

Por último, otro recurso bastante útil es la posibilidad de determinar el texto por el que empieza o acaba el valor de un atributo. Veamos un ejemplo, donde se apreciará mucho mejor esta funcionalidad:

a[href]::before {
  content: url(icon_url.png);
  padding-right: 3px;
}

a[href$=".pdf"]::before {
  content: url(icon_pdf.png);  
}

a[href]::after {
  content: ": " attr(href);
  color: #666;
  display: inline-block;
}

Obtendremos el siguiente resultado:

CSS: Atributos en enlaces

Varias aclaraciones al respecto:

Recuerda que también es posible seleccionar el principio de un atributo, utilizando ^= en lugar de $=, como podemos ver en el siguiente ejemplo:

a[href^="ftp://"]::after {
    content: " (Servidor FTP): " attr(href);
    color: #666;
    display: inline-block;
}
Manz
Publicado por Manz

Docente, divulgador informático y freelance. Trabaja como autónomo, escribe en Emezeta.com (sitio web de tecnología con +10.000 visitas diarias) y es profesor en la Oficina de Software Libre de la Universidad de La Laguna, en Tenerife (Islas Canarias).