[CSS] Seleccionarlo todo excepto una clase o elemento
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 child que nos permiten seleccionar un elemento en función de su posición dentro del DOM.
Así pues:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
/*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?
La pseudo-clase :not
CSS3 incorporó la pseudoclase :not cuyo funcionamiento es aplicar el estilo a todos los elementos excepto al dado en el argumento.
Por ejemplo:
|
1 2 3 |
div ul:not(:first-child) { background-color: #900; } |
Esto haría que todos los ul dentro de Divs adquiriedan un color de fondo, excepto los primeros ul dentro de cada div.
Pero este método únicamente puede utilizarse con selectores simples, es decir:
- selectores de tipo: p h1 div
- selectores universales: * [lang^=en] *.warning
- selectores de atributos: [att][att=val]
- selectores de clase: .casa.titulo2
- selectores de ID: #pie#menu_movil
- selectores de pseudo-clase: ::before::first-line
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):
|
1 2 3 4 5 6 7 |
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 !important para imponer un estilo sobre otro:
|
1 2 3 |
div ul:first-child { background-color: transparent!important; } |
Escribir comentario