Explicaciones detalladas sobre los selectores de atributo en CSS, que nos permiten seleccionar elementos que tengan atributos que se ajustan a un patrón.
Los selectores de atributo son uno de los tipos de selectores que tenemos en CSS, muy útiles aunque a veces no tan conocidos como otros más habituales, como los de clase o etiqueta.
Los selectores en CSS sirven para indicar a qué campos queremos aplicarles estilos. Tenemos un capítulo dedicado a los selectores del manual de CSS donde ya vimos algunos usos básicos de los selectores de atributo. En esta ocasión camos a profundizar abordando usos un poco más avanzados y nuevos ejemplos.
Este es el índice de apartados del artículo Selectores de atributo en CSS.
Compatibilidad de los selectores de atributo en CSS
Los selectores de atributo fueron introducidos en CSS 2.1, por lo que están completamente disponibles en los navegadores actuales. Incluso en aquellas especificaciones se introdujeron unos operadores especiales que se pueden usar en los selectores de atributo que vamos a ver también en este artículo.
Sintaxis del selector de atributo
Comenzamos analizando la sintaxis básica de los corchetes, que se usa siempre que se necesita aplicar estilos usando selectores de atributo. Lo veremos con distintos ejemplos.
Existencia de un atributo
El ejemplo más elemental es cuando queremos acceder a elementos que tengan un atributo determinado, es decir que ese atributo exista en el tag HTML.
[disabled] {
color: rgb(168, 162, 196);
}
Esto podría aplicar a un campo input que esté desactivado. Si está el atributo "disabled", entonces se aplicará el estilo CSS. Si no está el atributo "disabled", entonces no se seleccionará el elemento.
<input type="text" name="apellidos" disabled value="Deshabilitado">
Pero también podría aplicar a los elementos <select> que tengan un atributo disabled.
<select name="sexo" disabled>
<option value="h">Hombre</option>
<option value="m">Mujer</option>
<option value="-" selected>No deseo indicarlo</option>
</select>
Si quisiéramos que el selector de atributo seleccionase únicamente los campos <input> podríamos combinarlo con el selector de etiqueta, de esta forma.
input[disabled] {
color: rgb(168, 162, 196);
}
Otro ejemplo podrían ser los enlaces que tengan un atributo "target". Si los queremos seleccionar todos, podríamos usar este CSS:
[target] {
border: 1px solid red;
}
Seleccionar cuando el atributo tenga un valor determinado
Un segundo caso de los selectores de atributo lo tenemos cuando queremos seleccionar los elementos que tengan un atributo, siempre que su valor sea uno determinado.
Por ejemplo, podríamos seleccionar todos los elementos <a> que tengan un valor del atributo target que podría ser por ejemplo "_blank". En este caso el selector de atributo tendrá esta forma.
[target="_blank"] {
color: red;
}
En este ejemplo todos los elementos que tengan el atributo target con el valor "_blank" tendrían el color de texto en rojo.
Operadores en los selectores de atributo
Podemos usar algunos operadores sobre los selectores de atributo que no resultan tan conocidos y pueden permitir refinar bastante las apariciones de determinados valores en los atributos consultados.
Estos son los operadores disponibles en los selectores de atributo:
- *= (que contenga): El operador
*permite seleccionar elementos que tienen como valor de un atributo al menos una aparición de una cadena específica. - ^= (apariciones al inicio del valor del atributo): selecciona elementos que tienen un atributo cuyo valor comienza con una cadena específica.
- $= (apariciones al final del valor del atributo): selecciona elementos que tienen un atributo cuyo valor termina por una cadena específica.
- ~= (contenga palabra exacta o separada por espacios): selecciona elementos que tienen en el valor de atributo un contenido exacto a una cadena especificada, o que contenga una palabra separada por espacios con una cadena especificada.
- |= (contenga palabra exacta o separada por guiones): Similar al anterior, pero la palabra puede estar separada por guiones en vez de espacios.
Ahora vamos a ver algunos ejemplos que pueden aportar un poco más de claridad a estos selectores de atributo con operadores. Sobre todo, los dos últimos que creo que son un poco más complejos.
Fijémonos en este enlace y el atributo title:
<a href="https://www.ejemplo.com" target="_blank" title="enlace chulo">Enlace seguro (https)</a>
Podríamos seleccionarlo así:
[title~="chulo"] {
background-color: aqua;
}
Como esa etiqueta <a> tiene el title="enlace chulo" la seleccionaríamos mediante el operador ~="chulo". Conseguimos seleccionarlo, no porque el title sea exactamente "chulo", sino porque esa palabra se encuentra de manera completa separada por un espacio.
Tenemos otro ejemolo ahora en relación al siguiente código HTML de esta división:
<div class="other-item">Otro elemento con clase terminada en "-item"</div>
Podríamos seleccionarla así:
[class|="other"] {
font-weight: bold;
}
En este caso la palabra "other" tampoco está idéntica en el atributo class, sino que se encuentra de manera completa pero separada por un guión. Por eso se selecciona mediante el operador "|".
Selectores de atributo en Web Components con :host
Para quien le gusta usar el estándar de Web Components para desarrollar elementos personalizados (custom elements) quiero mencionar una práctica que uso muchas veces para definir estilos en el componente en función de sus atributos.
Se trata de aplicar los selectores de atributo a la etiqueta host usando una combinación de la pseudoclase :host y el selector de atributo, para darle estilos específicos a los elementos de un componente cuando se han usado con determinados atributos en la etiqueta del componente.
Por ejemplo, podemos tener una caja modal que se llama <caja-modal> y podría generar una caja de diálogo para las aplicaciones web. Esta caja modal podría estar abierta o cerrada. En el caso que queramos que esté abierta le podríamos colocar un atributo "opened" en la etiqueta del componente, tal que así:
<caja-modal opened>contenido…</caja-modal>
Para conseguir que esa caja aparecise cuando el elemento tiene el atributo opened podríamos tener en el CSS de ese componente un código como este:
:host([opened]) section {
display: block;
}
Gracias a ese código, en un elemento <section> que hay dentro del shadow dom de ese componente estaremos asignando el display: block. Ese <section> podría tener el contenido de la caja de diálogo y al ponerle el display a block conseguimos que cuando la etiqueta de la caja modal tenga el atributo "opened", se vea el contenido del diálogo. Practicamente no hace ni falta Javascript!
Este punto es un uso un poco avanzado que quería mencionar, por si consigo que a alguien le pique un poco la curiosidad y quiera profundizar un poco más en las posibilidades de los Web Components. Es un estándar que soportan todos los navegadores, al que le puedes sacar un gran partido si te dedicas al desarrollo. En DesarrolloWeb tenemos mucho material sobre Web Components ya que desde siempre nos hemos volcado en divulgar este estándar.
Código completo HTML y CSS para practicar con selectores de atributo
Ahora para acabar puedes encontrar el código HTML y CSS que he usado para escribir este artículo sobre los selectores de atributo. Puedes tomarlo de base para practicar tú mismo y experimentar cualquier cosa que se te ocurra y pueda aclarar un poco más esta característica del CSS.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Práctica con Selectores de Atributo de CSS</title>
<style>
[data-type] {
font-weight: bold;
}
[href^="https"] {
color: green;
}
[target="_blank"] {
text-decoration: none;
}
[class$="-item"] {
font-style: italic;
font-size: 2rem;
}
[title~="chulo"] {
background-color: aqua;
}
input[disabled] {
color: rgb(168, 162, 196);
}
[class|="other"] {
font-weight: bold;
}
</style>
</head>
<body>
<p data-type="info">Este párrafo tiene un atributo "data-type" con valor "info".</p>
<a href="https://www.ejemplo.com" target="_blank" title="enlace chulo">Enlace seguro (https)</a>
<a href="http://www.ejemplo.com" title="link">Enlace no seguro (http)</a>
<div class="menu-item">Elemento de menú con clase terminada en "-item"</div>
<div class="other-item">Otro elemento con clase terminada en "-item"</div>
<form action="#">
<p>
Nombre:
<br>
<input type="text" name="nombre" value="Miguel">
</p>
<p>
Apellidos:
<br>
<input type="text" name="apellidos" disabled value="Deshabilitado">
</p>
<p>
Sexo
<br>
<select name="sexo" disabled>
<option value="h">Hombre</option>
<option value="m">Mujer</option>
<option value="-" selected>No deseo indicarlo</option>
</select>
</p>
</form>
</body>
</html>
Conclusión
Los selectores de atributo en CSS pueden ser herramientas muy potentes y útiles en muchas ocasiones. No son los selectores que más se usan pero sí que merece mucho la pena tenerlos en cuenta para desarrollar páginas web.
Espero que este artículo te haya resultado aclarador y bastante útil para seguir aprendiendo CSS.
Miguel Angel Alvarez
Fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Com...