El selector de atributo en CSS es una característica que nos permite seleccionar elementos HTML basados en los atributos que tengan asignados. Este selector es extremadamente útil cuando queremos aplicar estilos de manera específica a elementos que poseen ciertos atributos o valores.
A continuación, explicaré cómo funciona esta característica en detalle. Mostraré ejemplos prácticos simples y avanzados para comprender su uso. Finalizaré con recomendaciones sobre cómo utilizarlo eficazmente.
¿Qué es el selector de atributo en CSS?
El selector de atributo en CSS nos permite aplicar estilos a elementos basados en los atributos que estos contienen. Un atributo en HTML es una propiedad que se le asigna a un elemento para proporcionar información adicional sobre el mismo. Algunos atributos comunes son href, src, alt, class y id. Existen atributos globales que tienen disponibles todos los elementos (por ejemplo la clase) y otros específicos de algunos de ellos (por ejemplo href para <a> y <link>).
Si necesitamos aplicar estilos solo a los enlaces (<a>) que tengan un atributo href, podríamos usar un selector de atributo de la siguiente forma:
a[href] {
color: blue;
text-decoration: underline;
}En este caso, solo los enlaces que tengan un atributo href recibirán el estilo, ignorando aquellos que no lo tengan.
Tipos de selectores de atributo
En mis clases sobre diseño y desarrollo Web siempre destaco la importancia de dominar los secretos de CSS. Este lenguaje proporciona varios tipos de selectores de atributo que nos permiten afinar la selección de elementos. A continuación analizaremos algunos casos.
1. Selector de atributo simple
Este selector se utiliza para aplicar estilos a elementos que contienen un atributo específico, sin importar su valor.
input[type] {
border: 2px solid blue;
}Este ejemplo aplicará un borde azul a cualquier campo de entrada (<input>) que tenga un atributo type, sin importar su valor (por ejemplo, type="text", type="password", etc.).
2. Selector de atributo con valor exacto
Se utiliza cuando necesitamos aplicar estilos solo a los elementos cuyo atributo tenga un valor específico.
input[type="text"] {
background-color: lightyellow;
}Aquí solo los campos de entrada cuyo type sea exactamente text tendrán el fondo de color amarillo claro.
3. Selector de atributo que comienza con un valor
Este selector se usa para seleccionar elementos cuyo valor de atributo comience con un texto específico. Utiliza el símbolo ^=.
a[href^="https"] {
color: green;
}Este selector aplicará el color verde a cualquier enlace que apunte a una URL que comience con https.
4. Selector de atributo que termina con un valor
Se utiliza para seleccionar elementos cuyo valor de atributo termine con una cadena específica. En este caso empleamos el símbolo $=.
img[src$=".jpg"] {
border: 1px solid black;
}Este selector añadirá un borde negro a todas las imágenes (<img>) cuyo atributo src termine con la extensión .jpg.
5. Selector de atributo que contiene un valor
Con este selector podremos aplicar estilos a elementos cuyo atributo contenga una cadena de texto en cualquier parte de su valor. Podemos utilizar el símbolo *=.
a[href*="ejemplo"] {
color: red;
}En este caso, todos los enlaces que contengan la palabra ejemplo en su URL tendrán el color rojo.
6. Selector de atributo que coincide con una palabra
Este selector selecciona elementos cuyo valor de atributo contenga una palabra exacta. Se usa el símbolo ~=.
[class~="boton"] {
background-color: orange;
}Aquí solo los elementos cuyo atributo class contenga la palabra boton (como class="boton grande") recibirán el fondo naranja.
Ejemplos prácticos de uso
En esta sección veremos algunos ejemplos prácticos de uso del selector de atributo. Analizaremos como este selector nos puede ayudar a distinguir enlaces, trabajar sobre campos de formularios, estilizar aprovechando custom data y el formato de las imágenes.
Ejemplo 1: cambiar el estilo de enlaces externos
Si necesitamos que todos los enlaces externos (aquellos que comienzan con http) se vean diferentes a los enlaces internos podemos emplear el siguiente código CSS:
a[href^="http"] {
color: orange;
text-decoration: none;
}Esto hará que los enlaces externos tengan un color naranja y sin subrayado. Está claro que este ejemplo también aplica a https (porque comienza con http).
Ejemplo 2: aplicar estilos a campos de formulario específicos
Contamos con la posibilidad de usar selectores de atributo para estilizar diferentes tipos de campos en un formulario. A continuación veremos un ejemplo para actuar sobre los inputs según el valor de sus types:
input[type="email"] {
background-color: lightblue;
}
input[type="password"] {
background-color: lightpink;
}Aquí, los campos de correo electrónico (type="email") tendrán un fondo azul claro, mientras que los campos de contraseña (type="password") tendrán un fondo rosado.
Ejemplo 3: trabajando con custom data
Supongamos que estamos trabajando con un conjunto de iconos SVG y necesitamos aplicar un estilo diferente a aquellos que tienen un atributo personalizado data-icon.
svg[data-icon^="social-"] {
fill: #007bff;
width: 24px;
height: 24px;
}Aquí seleccionamos solo los iconos que tienen un data-icon que comienza con social-, como data-icon="social-facebook" o data-icon="social-instagram".
Ejemplo 4: aplicar estilos filtrando imágenes por su formato
Podemos usar el selector de atributo para aplicar estilos específicos según el formato de imagen, como .png o .svg.
img[src$=".png"] {
border: 3px solid red;
}
img[src$=".svg"] {
border: 3px solid blue;
}Este código aplica un borde rojo a las imágenes PNG y un borde azul a las imágenes SVG. Es importante señalar que en este caso lo que verifica el código CSS es la extensión de la imagen, tal como se especifique en el atributo src de la etiqueta <img> en la parte de HTML.
Especificidad de los selectores de atributo
La especificidad en CSS se refiere a la prioridad que tienen ciertos selectores cuando múltiples reglas compiten entre sí. Los selectores de atributo tienen la misma especificidad que un selector de clase.
Esta es una característica que siempre destaco en mis clases, ya que conocer su naturaleza y comprenderla a fondo nos ayuda a determinar que estilos se aplicarán en cada caso.
Por ejemplo, si tenemos un conflicto entre un selector de clase y un selector de atributo, ambos tendrán la misma especificidad:
/* Especificidad: 0,1,0 */
.botones {
background-color: red;
}
/* Especificidad: 0,1,0 */
input[type="submit"] {
background-color: blue;
}Si un elemento coincide con ambos selectores, se aplicará la regla que aparezca más tarde en el archivo CSS, ya que ambos tienen la misma especificidad. Esto es así, ya que si dos elementos tienen la misma especificidad, y no hay otra característica que modifique esto, se aplica la cascada.
Recomendaciones para usar el selector de atributo
A continuación veremos 4 recomendaciones clave a la hora de emplear el selector de atributo:
- Evitar usar selectores de atributo cuando no sea necesario. Los selectores de clase son generalmente más eficientes y fáciles de mantener. Debemos emplear selectores de atributo cuando realmente necesitemos filtrar elementos según sus atributos.
- Combinar selectores de atributo con clases. En lugar de depender exclusivamente de los atributos, es una buena práctica combinar selectores de atributo con clases para mejorar la legibilidad y mantener el código CSS claro.
- La especificidad siempre importa. Como mencionaba anteriormente, los selectores de atributo tienen la misma especificidad que las clases. Si no se tiene cuidado, pueden entrar en conflicto con otras reglas CSS.
- Elegir cuando es conveniente usar esta característica. Los selectores de atributo pueden ser poderosos, pero también pueden aumentar la complejidad del CSS si no se usan de manera adecuada. Debemos usar selectores de atributo solo cuando necesitemos un control granular sobre ciertos elementos.
En conclusión
El selector de atributo en CSS es una herramienta flexible y poderosa para aplicar estilos en función de los atributos de los elementos HTML. Desde necesidades simples, como estilizar enlaces, hasta usos avanzados como manejar iconos SVG o imágenes específicas, este selector puede ayudarte a hacer que nuestros CSS sea más dinámico y legible.
Dominar las características avanzadas de CSS nos permite manejar de una manera más robusta nuestros proyectos. Esto colabora para que podamos escribir un código más limpio y fácil de mantener.
Si te interesa saber más sobre CSS dejame un comentario o escribeme un mensaje.
Más sobre Diseño y desarrollo Web
Autor de los libros: Webmaster Profesional, HTML5: Comprenda el cambio y Apps HTML5 para móviles. Soy especialista en Desarrollo Web. Realizo proyectos basados en Inteligencia Artificial. Colaboré como autor y editor de contenidos para revistas, colecciones y diversos medios impresos y digitales. Brindo capacitaciones, clases de formación y consultorías sobre lenguajes de programación y herramientas para Desarrollo Web y móvil en modalidad online y presencial.
Deja una respuesta