:not() y selectores con varias condiciones en CSS

En esta lección seleccionarás elementos por exclusión — «todos menos estos» — para escribir menos reglas y más claras.

:not(.clase) selecciona los elementos que no tienen esa clase. También puedes encadenar condiciones escribiéndolas seguidas sin espacio: li.important significa «los li que además tienen la clase important». El espacio, en cambio, indica descendencia: li .important sería «lo que tenga la clase important dentro de un li».

El código de ejemplo tacha todos los elementos de la lista salvo los marcados como importantes, y a estos los pinta en rojo y en negrita. Prueba a mover la clase important a otro li.

Ese espacio es justo donde más se falla al empezar: li.important y li .important parecen casi iguales y seleccionan cosas totalmente distintas. Cuando un estilo no se aplique, mira primero si sobra o falta un espacio.

En proyectos reales, :not() evita muchísimas reglas del tipo «aplícalo a todos y luego deshazlo en estos»; por ejemplo, «margen a todos los elementos menos al último» se resuelve en una sola línea.