CSS

Selectores avanzados: :has(), :is(), :where() y :not()

Domina los selectores funcionales modernos para reducir duplicación, controlar especificidad y crear lógica visual sin JavaScript.

¿Cuánto sabes de CSS?

📘 Teoría

:has() para decisiones de layout y estado

Selecciona el elemento actual cuando se cumple una condición interna.

Durante años CSS no podía seleccionar un padre según su contenido. :has() resuelve eso y habilita patrones que antes requerían JavaScript.

La forma mental correcta es: elemento:has(condición). Si la condición se cumple, se estiliza el elemento principal.

En .card:has(img) no seleccionas la imagen, seleccionas la tarjeta por su contenido. En formularios, form:has(:invalid) permite feedback global de estado.

Sintaxis: elemento:has(selector).
Casos típicos: tarjetas con/sin media, menús con submenú, formularios con errores.
Puedes combinar :has() con :not(): article:not(:has(img)).
Acota el alcance por componente: .checkout-form:has(:invalid) suele ser mejor que reglas globales.
Compatibilidad: soporte sólido en navegadores modernos; revisa Can I Use.

Patrones concretos con :has()

.card:has(img) {
  grid-template-columns: 160px 1fr;
  border-color: #f59e0b;
}

.form-row:has(input:focus) {
  outline: 2px solid #2563eb;
}

form:has(:invalid) .btn-submit {
  opacity: 0.6;
  pointer-events: none;
}

nav li:has(ul) > a::after {
  content: "▾";
  margin-left: 0.35rem;
}

:is(), :where() y :not(): agrupar y excluir con estrategia

Mismo objetivo de mantenimiento, distinta estrategia de especificidad.

Usa :is() para agrupar selectores equivalentes sin repetir prefijos largos.

Usa :where() para estilos base que quieras sobrescribir con facilidad, porque su especificidad es 0.

Usa :not() para excluir variantes concretas sin duplicar reglas generales.

:is(a, b, ...): agrupa y toma la especificidad del argumento más fuerte.
:where(a, b, ...): agrupa con especificidad 0.
:not(...): exclusión explícita y mantenible.
Regla práctica: base con :where(), variaciones con clases de componente.

Agrupación mantenible

:is(header, main, footer) a {
  color: #1d4ed8;
}

:where(article, section) h2 {
  margin-top: 0;
}

:is(.btn, .chip, .tag):focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

.button:not(.button--primary, .button--danger) {
  background: #e2e8f0;
  color: #0f172a;
}

Estrategia de especificidad y buenas prácticas

Evita guerras de especificidad desde el diseño del selector.

Si una regla es fundacional (tipografía base, espaciados por defecto), prioriza :where() para permitir overrides claros.

Reserva :is() para agrupaciones dentro de componentes o layout, y combina con clases para estados de interfaz.

Evita cadenas muy complejas como :has(:not(...):is(...)) cuando no aportan valor real: la legibilidad también es mantenibilidad.

Base baja + override claro

:where(.card, .panel, .sheet) h3 {
  font-size: 1.125rem;
  line-height: 1.35;
}

.card.featured h3 {
  font-size: 1.25rem;
}

Pseudo-clases de validación en formularios

Estiliza inputs según required, pattern y validación nativa.

La validación nativa de HTML5 expone estados útiles para CSS: :valid, :invalid, :required y :optional.

Combinando esos estados con :has() puedes adaptar el botón de envío sin depender de JavaScript.

:valid / :invalid: según si el valor cumple las restricciones.
:required / :optional: según la presencia del atributo required.
Evita estilizar :invalid antes de interacción real; combina con :focus o :not(:placeholder-shown).

Estilos por estado de validación

input:focus:invalid {
  border-color: #dc2626;
  outline-color: #dc2626;
}

input:valid:not(:placeholder-shown) {
  border-color: #16a34a;
}

form:has(:invalid) .btn-submit {
  opacity: 0.6;
  cursor: not-allowed;
}

1 :has() para decisiones de layout y estado 2 :is(), :where() y :not(): agrupar y excluir con estrategia 3 Estrategia de especificidad y buenas prácticas 4 Pseudo-clases de validación en formularios

🧭 Visuales clave

Selectores avanzados y prioridad

Ayuda a decidir cuando conviene simplificar selectores para mantener override limpio.

Comparativa de selectores compuestos y su impacto en especificidad.

Mapa de selectores avanzados

Sirve como chuleta rápida para reconocer combinadores, funcionales y contextos donde aportan precisión real.

Resumen visual de selectores avanzados en CSS y sus casos de uso

Pseudo-clases y pseudo-elementos

Aclara una de las confusiones más frecuentes cuando ya empiezas a usar selectores más expresivos.

🧪 Aprende probando

Ejemplo Demo: decisiones con :has() + agrupación con :is() Activa un modo visual y comprueba estilos compartidos sin duplicar selectores.

⌄

Ejemplo Demo interactiva: formulario contextual El contenedor cambia cuando hay foco o errores.

⌄

🏁 Retos

Reto Reto: form con :has(:invalid) Deshabilita visualmente el botón cuando haya campos inválidos usando form:has(:invalid) .btn-submit.

⌄

Reto Reto: exclusión con :not() Aplica un estilo neutro a todos los botones salvo primary y danger.

⌄

Reto Reto: tarjeta condicional Resalta .card solo si contiene una imagen.

⌄

🧰 Recursos

Enlaces útiles

MDN - :has() MDN - :is() MDN - :not() MDN - Pseudo-clases de validación Can I Use - :has()

Test

Comprueba tus conocimientos con un test sobre CSS.

Test de CSS

Recursos del curso 78

📘 Glosario 🎧 Audios 📄 PDFs 🖼️ Infografías 🎬 Vídeos 🔗 Enlaces 🧠 Flashcards 🧩 Snippets

‹

Lección 52

View Transitions: Animaciones entre estados

Lección 54

Selectores funcionales: :is(), :where(), :not() y patrones combinados

›