Aún nos quedan por ver dos pseudo clases especiales, que no admitían, por su naturaleza, clasificarlas en otros artículos. Nos pueden permitir mucha mayor flexibilidad a la hora de diseñar nuestras hojas de estilos.
Aunque hay algunos desarrolladores que no las emplean, nos pueden facilitar la tarea y ahorrar código, con lo que vamos a incluirlas en nuestra lista de selectores.
LA PSEUDO CLASE :root
Esta pseudo clase no se aplica a ningún elemento específico, sino a todo el documento HTML. No confundir con el selector *, que hace que se apliquen las reglas de estilo a cada elemento, de forma individual. Esta pseudo clase trata todo el documento como un solo elemento. Suponte que tienes la siguiente hoja de estilos:
1 2 3 |
:root{ background-color: #9aef92; } |
Es equivalente a la siguiente:
1 2 3 |
html{ background-color: #9aef92; } |
LA PSEUDO CLASE :not
Esta pseudo clase puede combinarse con cualquier otro selector de CSS para que invierta su ámbito de selección. Así pues, si tenemos un selector que afecte a los párrafos (elementos p
), y lo combinamos con esta pseudo clase, la regla CSS definida se aplicará a todos los elementos que no sean de tipo p
. Suponte el siguiente HTML:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <title>Pseudo clases</title> <link rel="stylesheet" href="estilos.css"> </head> <body> <p>Párrafo 1</p> <p>Párrafo 2</p> <p>Párrafo 3</p> <p>Párrafo 4</p> <div>Contenedor A</div> <div>Contenedor B</div> <div>Contenedor C</div> <div>Contenedor D</div> </body> </html> |
Como ves, tenemos el contenedor padre de todo el documento, que es el elemento html
. Dentro, como hijo de este, está el contenedor padre de la página, que es el elemento body
. Dentro de este, a su vez, existen elementos p
y elementos div
, que son todos hijos de body
. Ahora suponte la siguiente hoja de estilos:
1 2 3 4 |
body>p{ border: 1px solid #0a6301; background-color: #9aef92; } |
La regla se aplica a todos los hijos de body
que sean elementos de tipo p
. Ahora vamos a cambiar la hoja de estilos, así:
1 2 3 4 |
body>:not(p){ border: 1px solid #0a6301; background-color: #9aef92; } |
Ahora la regla se aplica a todos los hijos de body
que no sean elementos de tipo p
. Prueba ambos ejemplos en tu navegador para comprender cómo funciona. Este selector puede aplicarse, directamente, en jQuery.
RESUMEN
OTRAS PSEUDO CLASES |
||
SELECTOR | COMENTARIOS | |
:root |
Se refiere al conjunto de todo el documento HTML. | |
:not |
Se refiere a elementos que NO sean del tipo referenciado. |