La pseudo-class :not

22/dic/2015 3

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:

Comentarios

  1. Ricardo Soto [#]

    Me gustan los pseudoelementos, :not es uno que uso poco ahora quiero darle mas atencion.

    Gracias por el articulu.

  2. Ider Guerrero [#]

    Como se hace lo que tienes en la imagen principal con las constelaciones al pasar el mouse?
    o como puedo buscar documentación sobre como hacerlo? ^_^

Deja tu Comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

CSSLab