:not(), :is() y :where()
Excluya elementos con :not(), haga coincidir cualquiera de una lista con :is() y utilice :where() para obtener una especificidad baja.
:not(), :is() y :where() es una lección gratuita de CSS Academy en CoddyKit. Esta es la lección 3 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de CSS Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de CSS Academy incluye 4 lecciones en total.
Pseudoclase :not()
:not(selector) selecciona los elementos que no coinciden con el selector indicado. Invierte la selección.
<input type="text" placeholder="Text input (styled)" />
<input type="submit" value="Submit (unstyled)" />
:not() con varios argumentos
El CSS moderno permite varios argumentos dentro de :not(): coincide con los elementos que no coinciden con ninguno de los selectores indicados:
<a href="#">Normal link</a> <a href="#" class="active">Active link</a> <a href="#" class="disabled">Disabled link</a>
Especificidad de :not()
La especificidad de :not() es la especificidad de su argumento más específico. :not(.active) tiene una especificidad de nivel de clase (0,1,0).
Pseudoclase :is()
:is() coincide con cualquier elemento que coincida con cualquiera de los selectores de una lista. Simplifica la agrupación y reduce la repetición.
<header><h1>Site Title</h1><h2>Subtitle</h2><h3>Tagline</h3></header>
Especificidad de :is()
:is() adopta la especificidad de su argumento más específico. Si la lista contiene un selector de ID, toda la regla tiene una especificidad de ID.
<div id="header"><h2>Header H2 (crimson via ID)</h2></div>
<div class="card"><h2>Card H2 (crimson via class)</h2></div>
Análisis tolerante de :is()
:is() utiliza un análisis tolerante de selectores: si algún selector de la lista no es válido, se ignora silenciosamente y los demás siguen aplicándose. Los selectores normales separados por comas fallan por completo si uno de ellos no es válido.
Pseudoclase :where()
:where() funciona exactamente igual que :is(), pero tiene cero especificidad. Está diseñada para clases de utilidad y estilos de restablecimiento que deben ser fáciles de sobrescribir.
<h1>No top margin</h1><h2>No top margin</h2><h3>No top margin</h3>
:where() para restablecimientos
:where() es ideal para restablecimientos de CSS y estilos base que nunca deben imponerse en conflictos de especificidad:
<ul><li>Item A</li><li>Item B</li></ul>
<ol><li>Step 1</li><li>Step 2</li></ol>
Comparación de la especificidad
Resumen del comportamiento de la especificidad:
:is()— la especificidad más alta entre sus argumentos:where()— siempre tiene especificidad cero:not()— la especificidad más alta entre sus argumentos
Encadenamiento de :is() y :not()
Combínelas para crear selectores precisos y fáciles de leer:
<nav class="nav"><a href="#">Link</a> <button>Button</button> <a href="#" class="disabled">Disabled Link</a></nav>
Compatibilidad con navegadores
:is() y :where() son compatibles con todos los navegadores modernos. :not() con varios argumentos es compatible con los navegadores modernos. Evítelas en proyectos que requieran compatibilidad con IE11.
Comprobación rápida
¿Qué pseudoclase tiene especificidad cero independientemente de sus argumentos?
Repaso
:not() invierte la selección y acepta varios argumentos. :is() coincide con cualquiera de una lista y adopta la especificidad más alta de esa lista. :where() hace lo mismo, pero con especificidad cero: es perfecta para restablecimientos. Las tres utilizan un análisis tolerante e ignoran silenciosamente los selectores no válidos.
Preguntas frecuentes
¿La lección «:not(), :is() y :where()» es gratis?
Sí — el texto completo de «:not(), :is() y :where()» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de CSS Academy, actualiza a CoddyKit PRO. El curso de CSS Academy incluye 4 lecciones en total.
¿Qué aprenderé en «:not(), :is() y :where()»?
Excluya elementos con :not(), haga coincidir cualquiera de una lista con :is() y utilice :where() para obtener una especificidad baja. Practicas CSS Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar CSS Academy?
No se requiere experiencia previa. CSS Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 3 de 4.
¿Cuánto tiempo toma la lección «:not(), :is() y :where()»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de CSS Academy?
Sí. Cada lección de CSS Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- :hover :focus :active y :visited
- :nth-child y :nth-of-type
- :not(), :is() y :where()
- :checked, :disabled y pseudoclases de estado de formularios