CSS
:is(), :where(), :not() y :has()
Compara :is(), :where(), :not() y :has(), su efecto sobre la especificidad y su uso para simplificar selectores complejos y relaciones contextuales.
- Última actualización
- Actualizada
- Nivel
- Aplicación
CSS
Compara :is(), :where(), :not() y :has(), su efecto sobre la especificidad y su uso para simplificar selectores complejos y relaciones contextuales.
:is(h1, h2, h3) > a {
color: inherit;
}Reduce repetición. Su especificidad toma la mayor especificidad de los argumentos.
:is(.card, #featured) h2 { }El ID dentro de la lista puede elevar la especificidad de todas las coincidencias.
:where(.prose h2, .prose h3) {
margin-block-start: 2em;
}Siempre aporta especificidad cero, aunque sus argumentos sean complejos. Es útil para defaults fáciles de sobrescribir.
.button:not([disabled]) { }Selecciona cuando el argumento no coincide. La función no añade peso propio, pero los argumentos sí participan en especificidad.
.card:not(.featured, .promoted) { }.card:has(> img) { }Selecciona el elemento si una condición relativa coincide dentro o respecto a él.
.form-field:has(input:invalid) {
border-color: red;
}h2:has(+ p) {
margin-block-end: 0.5rem;
}Puede observar descendientes y relaciones posteriores.
:has() suele llamarse parent selector, pero es más general. El sujeto sigue siendo el elemento antes de :has().
article:has(.warning) { }Selecciona article, no warning.
:is(), :where() y :has() procesan listas relativas/forgiving según su gramática, permitiendo ignorar algunos argumentos no soportados en vez de perder toda la regla.
No dependas de esto sin probar la sintaxis exacta.
Default flexible:
:where(.card, .panel) a { color: inherit; }Variante deliberada:
:is(.card, .panel).featured { ... }:has() ya está optimizado para uso normal, pero condiciones extremadamente amplias sobre árboles enormes pueden provocar más invalidación al cambiar descendientes.
Prefiere relaciones claras:
.card:has(> .card__media) { }antes que búsquedas globales difíciles de razonar.
.navigation:has([aria-current="page"]) {
border-inline-start: 2px solid currentColor;
}.field:has(:focus-visible) {
outline: 2px solid var(--focus);
}:is() agrupa y toma la mayor especificidad interna.:where() agrupa con especificidad cero.:not() excluye coincidencias.:has() selecciona un sujeto según una relación.¿Por qué :where(#app .button) sigue siendo fácil de sobrescribir?
Porque la especificidad completa de :where() es cero, incluso si contiene IDs o selectores complejos.
Pseudo-elementos estiliza partes generadas o fragmentos del elemento.