[CSS] Pseudo-clase not para esquivar un first-child

[titulo][CSS] Seleccionarlo todo excepto una clase o elemento[/titulo]

En las hojas de estilo disponemos de decenas de tipos de selectores y pseudoclases, cuya intención es facilitarnos escoger a qué elemento aplicaremos un estilo.

Entre las pseudoclases más flexibles tenemos los [codigo]child[/codigo] que nos permiten seleccionar un elemento en función de su posición dentro del DOM.

Así pues:

/*Afecta únicamente al primer párrafo de una página*/
p:first-child {
}

/*Afecta únicamente al segundo div de una página*/
div:nth-child(2) {
}

/*Afecta únicamente al décimo span de una página*/
span:nth-child(10) {
}

/*Afecta únicamente al tercer elemento con la clase "armarios" de una página*/
.armarios:nth-child(3) {
}

 

Pero… ¿y si lo que queremos es lo contrario? ¿Y si queremos aplicar un estilo a TODOS los elementos EXCEPTO uno en concreto?

 

[titulo]La pseudo-clase :not[/titulo]

CSS3 incorporó la pseudoclase [codigo]:not[/codigo] cuyo funcionamiento es aplicar el estilo a todos los elementos excepto al dado en el argumento.

Por ejemplo:

div ul:not(:first-child) {
    background-color: #900;
}

Esto haría que todos los [codigo]ul[/codigo] dentro de [codigo]Divs[/codigo] adquiriedan un color de fondo, excepto los primeros [codigo]ul[/codigo] dentro de cada [codigo]div[/codigo].

Pero este método únicamente puede utilizarse con selectores simples, es decir:

• selectores de tipo: [codigo]p[/codigo] [codigo]h1[/codigo] [codigo]div[/codigo]
• selectores universales: [codigo]* [lang^=en][/codigo]  [codigo]*.warning[/codigo]
• selectores de atributos: [codigo][att][/codigo][codigo][att=val][/codigo]
• selectores de clase: [codigo].casa[/codigo][codigo].titulo2[/codigo]
• selectores de ID:  [codigo]#pie[/codigo][codigo]#menu_movil[/codigo]
• selectores de pseudo-clase: [codigo]::before[/codigo][codigo]::first-line[/codigo]

 

Si queremos aplicarlo a algo más complejo, tendremos que crear un estilo global (en el ejemplo, uno para todos los ul) y luego uno en particular para el elemento al que no queríamos aplicarle ese estilo (Ej: a los ul primeros):

div ul {
    background-color: #900;  /* Se aplica a todos los ul */
}

div ul:first-child {
    background-color: transparent; /* Reescribe el estilo anterior en los primeros ul */
}

Si generase conflicto, podemos aplicar [codigo]!important[/codigo] para imponer un estilo sobre otro:

div ul:first-child {
    background-color: transparent!important; 
}