Breaking

Post Top Ad

Your Ad Spot

miércoles, 13 de noviembre de 2019

El selector :not() CSS

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 SVGstar 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.cssstarBoilerplatestarFoundation de Zurbstar, 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.iostar

El soporte en los navegadores

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

No hay comentarios.:

Publicar un comentario

Post Top Ad

Your Ad Spot

Páginas