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.
0 Comentarios