Atributos CSS

Por último, una característica muy interesante de CSS es la posibilidad de aplicar estilos dependiendo de la existencia o el contenido de ciertos atributos de los elementos HTML. En CSS, estos atributos se rodean de corchetes [] y hay varias formas de utilizarlos, inspirados en un concepto llamado expresiones regulares:

Atributo ¿Cuándo se aplica el estilo?
[href] Si el elemento tiene atributo href.
[href="#"] Si el elemento tiene atributo href y su valor es #.
[href*="emezeta"] Si el elemento tiene atributo href y su valor contiene emezeta.
[href^="https://"] Si el elemento tiene atributo href y su valor comienza por https://.
[href$=".pdf"] Si el elemento tiene atributo href y su valor termina por .pdf (un enlace a un PDF).
[class~="emezeta"] Si el elemento tiene atributo class con una lista de valores y uno de ellos es emezeta.
[lang|="es"] Si el elemento tiene atributo lang con una lista de valores, donde alguno empieza por es-.

Atributo existente

Para empezar, podemos utilizar el atributo [style] para seleccionar todas las etiquetas HTML que contengan un atributo style para darles estilos en línea a un elemento. Estos elementos, aparecerían con fondo rojo:

[style] {
  background: red;
}

Este ejemplo es didáctico y no tiene finalidad práctica de diseño, ya que la idea sería mostrar visualmente que elementos tienen esa característica, algo que podría interesarle a un desarrollador. Si el elemento no tiene un atributo style definido, no se le aplican los estilos.

Atributo con valor exacto

Pero la potencia de los atributos en CSS es que podemos indicar el valor exacto que deben tener 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 <a> que tienen un atributo rel establecido a nofollow. Esta es una característica que le indica a Google (u otros robots o crawlers) que ese enlace no se debería tener en cuenta para seguirlo, algo que puede ser realmente útil para desincentivar SPAM en comentarios, por ejemplo.

Atributo contiene texto

En lugar de un valor específico, también podemos querer indicar un fragmento de texto que debe estar incluído, pero que no es el texto íntegro, casando con varias posibles coincidencias:

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

En la siguiente tabla se pueden ver varios ejemplos de enlaces, y cuáles se seleccionarían en este caso:

Etiqueta Valor del atributo href ¿Seleccionado?
<a> https://www.emezeta.com/
<a> https://www.emezeta.com/articulos/alternativas-a-bootstrap
<a> https://www.google.com/ No, no incluye emezeta
<a> https://www.google.com/search?q=emezeta
<a> emezeta
<link> https://www.emezeta.com/index.css No, no es <a>

De la misma forma, existe una variante que utiliza el comparador ~=. Esta variante nos permitiría seleccionar los elementos HTML que tengan un atributo con una lista de palabras separadas por espacios, donde una de ellas es el texto que hemos escrito a continuación. Se trata de una versión más restrictiva del comparador *=.

Comienzo/final de atributo

Otro recurso bastante útil es la posibilidad de seleccionar elementos dependiendo del texto con el que empiezan o con el que acaban en el valor de un atributo específico. 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);
  display: inline-block;
  color: #666;
}

Obtendremos el siguiente resultado:

  • El primer bloque CSS mostrará un icono (icon_url.png) antes (::before) de cualquier enlace con el atributo href.

  • El segundo bloque CSS sobrescribimos la regla anterior si se trata de un enlace donde el atributo href acaba en .pdf. Si es así, mostramos el icono de un archivo PDF (icon_pdf.png).

  • Por último, el tercer bloque se aplica a cualquier enlace con un atributo href, cambiamos el modo de representación con display: inline-block, para que el subrayado sólo afecte al enlace en sí.

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^="http://"]::after {
  content: " (Página no segura): " attr(href);
  display: inline-block;
  color: #666;
}

Ojo: En el segundo caso del ejemplo anterior, sólo se seleccionarían los enlaces que tengan un fichero .pdf donde la extensión esté en minúsculas. Si tenemos un enlace a un fichero .PDF no se incluiría en esa selección. Para evitar eso, podemos añadir una i antes del cierre ] del atributo:

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

De esta forma no tendríamos problemas ese problema, ya que esa i hace referencia a «case insensitive». Así no tendría en cuenta si son mayúsculas o minúsculas, sino que las tratas a todas como iguales.

Manz
Publicado por Manz

Docente, divulgador informático y freelance. Autor de Emezeta.com, es profesor en la Universidad de La Laguna y dirige el curso de Programación web FullStack y Diseño web FrontEnd de EOI en Tenerife (Canarias). En sus ratos libres, busca GIF de gatos en Internet.