⇪

El selector :not()

facebook-svg gplus-svg twitter-svg

El selector :not ( una pseudo-clase ) selecciona aquellos elementos que NO son representados por el argumento. Dicho de otra manera p:not(.excepcion) selecciona todos aquellos párrafos que NO tienen asignada la clase .excepcion.

El argumento

El argumento, o sea lo que aparece entre paréntesis puede ser:

  • - un elemento HTML:
  • :not(p){. . .}
  • - un atributo:
  • input:not([type="range"]){. . .}
  • - una clase:
  • p:not(.excepcion){. . .}
  • - un id:
  • p:not(#destacado){. . .}
  • - una pseudo-clase ( pero NO un pseudo-elemento como :first-letter o :first-line )
  • p:not(:nth-child(3)){. . .}

Especificidad

A diferencia de otras pseudo-clases, el selector :not no computa a efectos de especificidad.

Algunos ejemplos muy útiles

El soporte de SVG en IE9 vino con sorpresa: problemas de overflow. Para corregir este problema: 

svg:not(:root){ overflow:hidden; }

Puede encontrar esta línea de código en normalize.css, Boilerplate, Foundation de Zurb, etc. . .

Otra línea de código que se ve mucho por ahí es:

audio:not([controls]) { display: none; height: 0; }

Sin esta línea de código, en los navegadores modernos los elementos <audio> aparecen sin controladores. También elimina el exceso de height en los dispositivos iOS 5

Vea otros ejemplos en Codepen.io

El soporte en los navegadores

El soporte en los navegadores para el pseudo-selector :not es muy bueno.