07 · Selectors

Selectors

Selectores lógicos que reemplazan JS de estado

:has() Chrome 105+ · :is()/:where()/:not() amplio soporte

← Índice

:has()

El "parent selector" que CSS nunca tuvo. Estilá un elemento según su contenido.

Card sin icono

Fondo normal.

★

Esta tiene un .badge → la card entera cambia de borde y fondo.

article:has(.badge) { border-color: amber }

:is() / :where()

Agrupan selectores. :is() mantiene specificity; :where() la resetea a 0.

Heading con :is()

Párrafo con :is()

Link con :is()

:is(h4, p, a).target { color: amber }

:not()

Excluye elementos. Acá todos los items tienen borde salvo el que tiene .skip.

Item normal
Item normal
Item saltado (.skip)
Item normal

li:not(.skip) { border-left: amber }

css

/* :has() — estilá según el contenido */
.card-demo:has(.badge) {
  border-color: rgba(245, 158, 11, .5);
  background: rgba(245, 158, 11, .08);
}

/* :is() — agrupa selectores, mantiene specificity */
:is(h4, p, a).target {
  color: var(--amber-soft);
  font-weight: 600;
}

/* :not() — excluye elementos */
li:not(.skip) {
  border-left: 3px solid var(--amber-500);
}

Nota honesta sobre soporte

Muchas de estas APIs son recientes y aún no están en todos los navegadores (ver pill de cada sección). La gracia es que todas degradan bien: el carousel sigue scrolleando, el accordion abre/cierra, el textarea funciona — solo sin el "plus" animado.