Uso práctico para el selector :not de CSS

Existen muchos selectores o pseudo-clases de CSS que aunque sabemos que existen no acostumbramos a utilizarlos a menudo, en mi caso, :not es uno de ellos.

Básicamente, :not() es una pseudo-clase que sirve para añadir excepciones en nuestras hojas de estilo CSS.

Por ejemplo, si queremos que todos los estilos de párrafo tengan un margen inferior de 10px excepto el párrafo con la clase «aviso», podríamos usarlo así:

p:not(.aviso) {
margin-bottom: 10px;
}

Aunque eso está muy bien, lo cierto es que hasta ahora pocas veces lo he encontrado necesario, sin embargo hoy me he encontrado un caso en el que me ha sido especialmente útil, y es cuando estamos dando estilos a campos de formulario.

Cuando partimos por ejemplo de un theme que ya tiene unos estilos de base para los campos de un formulario y queremos modificarlos, es común encontrarnos con que a todos los input les queremos dar el mismo estilo menos al botón de enviar, por lo que tenemos que aplicar los estilos al input[type=text], input[type=email], etc…  y luego dar los estilos propios al botón, que a veces son incluso los que ya venían con el tema.

Es en ese caso cuando puede ser muy práctico utilizar el selector :not

input:not(input[type="submit"]) {
/* estilos para los campos de texto, email, teléfono, etc...^/
}

Otro caso sería si queremos aplicar estilos a todos los items de una lista o un menú excepto al último, que podríamos hacerlo con:

li:not(:last-of-type) { }

O aplicar una clase a todos los elementos diferentes, sean las etiquetas que sean, y excluirlos de un estilo en concreto:

:not(.diferente) {}

Como todo en CSS en general, este selector tiene muchas aplicaciones, pero lo difícil a veces es ir asumiéndolas e incorporándolas en nuestro uso habitual.

Referencia: https://www.w3schools.com/cssref/sel_not.asp

Compatibilidad con navegadores: https://caniuse.com/#feat=css-sel3