¿Qué son los atributos CSS?

Autor: | Última modificación: 9 de mayo de 2022 | Tiempo de Lectura: 4 minutos
Temas en este post:

CSS, en castellano «Hojas de estilo en cascada», es una herramienta de vital importancia para los desarrolladores web. Pese a eso, puede llegar a ser complicado instruirte por completo debido a la complejidad de algunas de sus herramientas o secciones. Es por eso que en este post te contaremos sobre los atributos CSS, qué son y cómo los puedes utilizar cuando estés diseñando tus sitios web.

¿Qué son?

Los atributos CSS son palabras especiales utilizadas dentro de la etiqueta de apertura, para controlar el comportamiento del elemento ya sea con HTML o CSS. Una característica muy interesante de CSS es la posibilidad de aplicar estilos según la existencia o el contenido de ciertos atributos de los elementos HTML. Es muy similar a como seleccionas las clases (en la mayoría de los casos, nos basta con utilizar clases en lugar seleccionar mediante atributos). Sin embargo, en algunos casos puede resultar muy potente ya que puedes seleccionar elementos HTML dependiendo de sus atributos y respectivos valores.

En CSS, estos atributos se rodean de corchetes [ ] y hay varias formas de utilizarlos, inspirados en un concepto llamado expresiones regulares:

  • [href]: Si el elemento tiene atributo href.
  • [href=»#»]: Si el elemento tiene atributo href y su valor es #.
  • [href*=»manzdev»]: Si el elemento tiene atributo href y su valor contiene manzdev.
  • [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~=»manzdev»]: Si el elemento tiene atributo class con una lista de valores y uno de ellos es manzdev.
  • [lang|=»es»]: Si el elemento tiene atributo lang con una lista de valores, donde alguno empieza por es-.

Atributo existente

Para empezar, puedes 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 resulta didáctico y no tiene finalidad práctica de diseño, ya que la idea sería mostrar visualmente que elementos tienen dicha característica, algo que podría llamar el interés de un desarrollador. Si el elemento no tiene un atributo style definido, no se le aplican los estilos.

Atributo con valor exacto

Gracias a la potencia de los atributos CSS, puedes indicar el valor exacto para que sean seleccionados. Para ello, simplemente utilizas el = y escribes el texto entre comillas dobles:

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

Este ejemplo selecciona los enlaces que tienen un atributo rel establecido a nofollow. Esta es una característica que le indica a Google (u otros robots) que ese enlace, no se debería tener en cuenta para ser seguido, algo que puede ser muy útil para desincentivar SPAM en los comentarios, por ejemplo.

El atributo contiene texto

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

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

De la misma forma, existe una variante que utiliza el comparador ~=. Esta variante te 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 has escrito previamente. Se trata de una versión más restrictiva del comparador *=.

Comienzo/final de los atributos CSS

Otro recurso que resulta muy útil, es la posibilidad de seleccionar elementos dependiendo del texto con el que empieza o con el que acaba en el valor de un atributo específico. Este es un ejemplo, donde se logra 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;

}

Puedes obtener el siguiente resultado:

  • El primer bloque CSS mostrará un icono (icon_url.png) antes (::before) de cualquier enlace con el atributo href.
  • En el segundo bloque CSS sobrescribe la regla anterior si se trata de un enlace donde el atributo href acaba en .pdf. Si es así, se muestra el icono de un archivo PDF (icon_pdf.png).
  • Por último, el tercer bloque se aplica a cualquier enlace con un atributo href, cambia 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;
}

En el 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, puedes añadir una i antes del cierre ] del atributo:

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

De esta forma no tendrías inconvenientes con 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.

Aprende más sobre CSS

Ahora que ya conoces qué son los atributos CSS y su funcionamiento dentro de la programación de sitios web, no dudes en seguir instruyéndote al respecto a través de nuestro Bootcamp en Desarrollo Web , donde además, podrás aprender herramientas que te permitirán mejorar tus procesos de desarrollo tecnológico.

👉 Descubre más del Desarrollo Web Full Stack Bootcamp ¡Descarga el temario!

👉 Prueba el Bootcamp Gratis por una Semana ¡Empieza ahora mismo!

👉 Conoce nuestros otros Bootcamps en Programación y Tecnología

[email protected]