CSS
Explica los selectores de atributo, sus operadores, sensibilidad de comparación y el comportamiento de las listas de selectores válidas e inválidas.
Los attribute selectors permiten responder a información ya declarada en HTML sin añadir una clase para cada caso.
[aria-current="page"] {
font-weight: 700;
}[disabled] { opacity: 0.6; }Coincide cuando el atributo existe, sin importar su texto.
Para boolean attributes, disabled="false" sigue presente y el control permanece disabled.
[type="email"] { ... }[class~="featured"] { ... }Coincide con una palabra completa dentro de una lista separada por espacios. Para clases, .featured es más claro.
[lang|="es"] { ... }Coincide con es o valores que comienzan es-, como es-CO.
[href^="https://"] { ... }
[href$=".pdf"] { ... }
[href*="example"] { ... }Úsalos con cuidado: una URL puede contener query, mayúsculas, encoding o extensiones engañosas.
[type="email" i] { ... }i solicita comparación ASCII case-insensitive. s solicita case-sensitive donde se soporta.
La sensibilidad predeterminada también depende del atributo y lenguaje del documento.
<div class="alert" data-variant="warning"></div>.alert[data-variant="warning"] { ... }Útiles para variantes controladas. No almacenes secretos ni conviertas el DOM en una base de datos sin necesidad.
.disclosure[aria-expanded="true"] .icon {
rotate: 180deg;
}Esto es bueno cuando JavaScript mantiene el atributo sincronizado con el estado real.
No uses aria-expanded solo para obtener un selector si el control no es expandible.
Selector list normal:
h1, h2, :unsupported-pseudo {
color: red;
}Un selector inválido puede descartar la regla completa.
Con :is():
:is(h1, h2, :unsupported-pseudo) {
color: red;
}Los elementos válidos de la lista pueden seguir funcionando según las reglas de forgiving selector list.
.card[data-state="loading"] > [role="status"] { ... }Aunque sea válido, pregunta si una clase o un selector más corto expresaría mejor el componente.
*= y crear coincidencias accidentales.[attr] comprueba presencia.[attr="value"] comprueba igualdad.~=, |=, ^=, $= y *= expresan relaciones distintas.data-* puede representar variantes declarativas.¿Por qué [disabled="false"] no selecciona un control habilitado?
Porque disabled es booleano por presencia; escribir el texto false no elimina el atributo ni cambia su estado.
Pseudo-clases permite seleccionar estados y relaciones que no dependen de una clase manual.