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;
}
Escribir comentario