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. | |
