Selectores CSS y jQuery (VIII). Otras pseudo clases.

Facebooktwittergoogle_pluslinkedinmailFacebooktwittergoogle_pluslinkedinmail

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:

Es equivalente a la siguiente:

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:

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:

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í:

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.
     

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *