CSS

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

Aprende a reducir repetición, controlar especificidad y construir selectores mantenibles con :is(), :where() y :not(), combinándolos con estados y estructura real.

¿Cuánto sabes de CSS?

📘 Teoría

Qué resuelve cada selector funcional

Usa cada uno con intención: agrupar, resetear especificidad o excluir.

:is() simplifica listas repetidas. En lugar de escribir header a, main a, footer a, puedes escribir :is(header, main, footer) a.

:where() tiene especificidad 0, ideal para estilos base que no deben competir con clases de componentes.

:not() evita ramas duplicadas cuando quieres aplicar una regla general excepto unos pocos casos.

:is(): agrupa sin repetir prefijos.
:where(): base fácil de sobrescribir.
:not(): exclusión explícita y mantenible.

Patrones típicos

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

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

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

Estrategia de especificidad

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

Si una regla es fundacional (tipografía base, espaciados por defecto), usa :where() para no bloquear overrides posteriores.

Reserva :is() para agrupaciones de selectores equivalentes dentro de componentes o layouts.

Combina con clases de utilidad para estados: .is-active, .is-disabled, y deja que el selector funcional reduzca repetición estructural.

Base baja + override claro

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

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

1 Qué resuelve cada selector funcional 2 Estrategia de especificidad

🧪 Aprende probando

Ejemplo Demo: agrupar sin duplicar Refactoriza selectores repetidos con :is() y aplica base con :where().

⌄

🏁 Retos

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

⌄

🧰 Recursos

Enlaces útiles

MDN - :is() MDN - :not()

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 53

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

Lección 55

:has() en profundidad: lógica visual sin JavaScript

›