La pseudo-class :not
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;
}
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;
}
Soporte: IE9+ con tranquilidad
Links:⌗
Leer otros artículos