T
css selectors has-selector is-selector web-development

El Poder de los Selectores CSS Modernos: :has, :is y :where

Domina la nueva generación de selectores CSS. Aprende cómo funciona :has() como selector de padre, y cómo :is() y :where() simplifican tus hojas de estilo.

2026-04-18

El Poder de los Selectores CSS Modernos: :has, :is y :where

Durante años, los desarrolladores CSS han soñado con un "selector de padre": una forma de dar estilo a un elemento basándose en sus hijos. También hemos luchado con listas de selectores largas y repetitivas que inflaban nuestros archivos CSS.

El CSS moderno finalmente ha cumplido. Con la llegada de :has(), :is() y :where(), la forma en que escribimos los selectores ha cambiado fundamentalmente.

1. :has(): El "Selector de Padre" que cambia las reglas del juego

La pseudoclase :has() es posiblemente la adición más potente a CSS en una década. Te permite seleccionar un elemento si contiene un hijo específico o si le sigue un hermano específico.

El caso de uso de "Padre"

/* Da estilo a la tarjeta SOLO si contiene una imagen */
.card:has(img) {
  display: flex;
  flex-direction: column;
}

/* Da estilo a la tarjeta SOLO si tiene una etiqueta destacada */
.card:has(.featured-badge) {
  border: 2px solid gold;
}

El caso de uso "Condicional"

Incluso puedes usarlo para dar estilo a las etiquetas basándote en el estado de sus inputs:

/* Da estilo a la etiqueta si el checkbox interior está marcado */
.form-group:has(input:checked) label {
  color: green;
  font-weight: bold;
}

2. :is(): Simplificando selectores complejos

¿Alguna vez has escrito código como este?

header h1, header h2, header h3, footer h1, footer h2, footer h3 {
  color: blue;
}

La pseudoclase :is() te permite agrupar selectores y reducir la repetición:

:is(header, footer) :is(h1, h2, h3) {
  color: blue;
}

Característica clave: Tolerancia

A diferencia de las listas de selectores tradicionales, :is() es tolerante (forgiving). Si un selector de la lista es inválido, el navegador ignorará el inválido y seguirá aplicando los estilos a los válidos.

3. :where(): Poder de especificidad cero

El selector :where() funciona exactamente igual que :is(), pero con una diferencia crucial: tiene especificidad cero.

Por qué importa la especificidad

en CSS, el selector más específico gana. Esto a menudo lleva a "guerras de especificidad" donde los desarrolladores usan !important o cadenas de selectores largas para sobrescribir estilos.

/* Esto tiene un impacto de especificidad cero */
:where(.content) p {
  color: gray;
}

/* Un simple selector de clase ahora lo sobrescribirá fácilmente */
.special-p {
  color: red; /* Gana porque :where() no añadió ningún 'peso' */
}

:where() es perfecto para Reseteos CSS y autores de librerías que quieren proporcionar estilos por defecto que sean fáciles de sobrescribir para los usuarios.

4. :nth-child avanzado con of S

Probablemente conozcas :nth-child(even), pero ¿sabías que ahora puedes filtrar la selección usando la palabra clave of?

/* Selecciona el 2º elemento, pero SOLO entre aquellos con la clase .visible */
li:nth-child(2 of .visible) {
  background: yellow;
}

Esto es increíblemente útil para listas dinámicas donde algunos elementos podrían estar ocultos mediante display: none.

5. Calculadora de Especificidad: Entendiendo las matemáticas

La especificidad de CSS se calcula usando tres columnas: (A, B, C).

  • A: IDs
  • B: Clases, atributos y pseudoclases
  • C: Elementos y pseudoelementos

Cómo afectan los nuevos selectores a esto:

  • :is() y :has(): Su especificidad es igual a la del selector más específico de su lista de argumentos.
  • :where(): Siempre tiene una especificidad de (0, 0, 0).

FAQ: Preguntas Frecuentes

P: ¿Es compatible :has() con todos los navegadores?

R: ¡Sí! A finales de 2023, :has() es compatible con las últimas versiones de Chrome, Safari, Firefox y Edge. Es seguro usarlo en proyectos web modernos.

P: ¿Cuándo debería usar :is() vs :where()?

R: Usa :is() cuando quieras que los selectores agrupados mantengan su especificidad normal. Usa :where() cuando quieras que los estilos sean muy fáciles de sobrescribir (común en estilos base o reseteos).

P: ¿Afecta :has() al rendimiento?

R: Los navegadores han optimizado :has() significativamente. Aunque usarlo cientos de veces en una sola página podría tener un pequeño impacto, para la mayoría de los patrones de interfaz de usuario, es extremadamente rápido y eficiente.

Escribe un CSS más limpio y declarativo

Al dominar estos selectores, puedes reducir significativamente la cantidad de clases de "utilidad" en tu HTML y mantener tu lógica donde pertenece: en tu CSS.

¿Quieres ver cómo se clasifican tus selectores en peso? Prueba nuestra Calculadora de Especificidad de Selectores CSS (próximamente) para dominar las matemáticas de CSS.

Volver al blog