La pseudo-class :not

22/Dic/2015 1894

Esta es una de las pseudo-clases menos utilizadas pero con gran utilidad al momento de alcanzar selectores CSS que no comparten cierta regla. La pseudo-clase :not permite seleccionar todos los selectores excepto que satisfacen cierta condición. Esto es muy útil ya que solíamos definir las propiedades a los elementos que necesitábamos y luego escribíamos la excepción y dependiendo de cómo, podía ser con clase CSS ó selectores hermanos/adyacentes u otros. Por ejemplo, para darle un borde separador a todos los elementos de un menú menos para el último podíamos:

.menu a {
  margin-right: 5px;
  padding-right: 5px;
  border-right: 2px solid gray;
}
.menu a:last-child {
  margin-right: 0;
  padding-right: 0;
  border-right: none;
}

JS Bin on jsbin.com

Con :not todo se hace más fácil y con mucho menos código:

.menu a:not(:last-child) {
  margin-right: 5px;
  padding-right: 5px;
  border-right: 2px solid gray;
}

JS Bin on jsbin.com

Soporte: IE9+ con tranquilidad

Links:

CSSLab