CSS, también conocido como 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 en ella, debido a la complejidad de algunas de sus funcionalidades o secciones. Por eso, en este pos, te hablamos 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?
Los atributos CSS son palabras especiales utilizadas dentro de la etiqueta de apertura para controlar el comportamiento del elemento, ya sea con HTML a en css. Una característica muy interesante de css tarjetas 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:
//Atributos CSS
[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:
//Atributos CSS
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 a la hora de seguirlo, 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:
//Atributos CSS
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:
//Atributos CSS
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 solo 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:
//Atributos CSS
a[href^="http://"]::after {
content: " (Página no segura): " attr(href);
display: inline-block;
color: #666;
}En el caso del ejemplo anterior, solo 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:
//Atributos CSS
//atributos de div
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.
