Selectores CSS y jQuery (IV). Pseudo clases de estado.

Facebooktwittergoogle_pluslinkedinmailFacebooktwittergoogle_pluslinkedinmail

Este artículo inicia la referencia de las pseudo clases. Las pseudo clases, como seguramente ya conoces, referencia estados específicos de elementos. Por ejemplo, si un elemento está seleccionado, o tiene el foco, o se le pasa el puntero por encima, se está cambiando su estado. Esto se detecta y gestiona de distinta forma en CSS3 y en jQuery. En CSS se crean reglas específicas para las pseudo clases, mientras que en jQuery se emplean eventos que se disparan cuando se produce un cambio de estado en un elemento. Esto no será siempre así. Existen determinadas pseudo clases que si pueden ser referenciadas como selectores de jQuery, cómo veremos en este artículo y el siguiente. Conoceremos ambas formas de gestión, las diferencias entre un entorno y otro, y la forma de trabajar en cada caso.

LA PSEUDO CLASE :hover

Empezamos por esta pseudo clase, porque se refiere a una situación muy definida y fácil de comprender. Detecta cuando el puntero del ratón está apoyado sobre un elemento de nuestro documento web. Veamos un ejemplo. Suponte el siguiente HTML:

Cómo ves, solo tiene un titular y algunos párrafos. Todo el texto aparece con los colores por defecto: escrito en negro sobre fondo blanco. Ahora observa el siguiente CSS:

Observa que tenemos una regla para los elementos p que establece el alineado cómo justificado. También tenemos una regla para los elementos p con la pseudo clase :hover, es decir, cuando el puntero del ratón se apoya sobre el elemento en cuestión. Ves que definimos color de texto blanco sobre fondo rojo. Cuando cargues el HTML en tu navegador verás que ocurren dos cosas. La primera es que, si pasas el puntero sobre cada párrafo, se cambia el color por defecto al definido en la pseudo clase, y al sacar el puntero se recupera el color por defecto. Pero también ves otra cosa. El alineado justificado se mantiene, con el puntero sobre el elemento o fuera de este. Esto significa que la pseudo clase de un elemento hereda las propiedades CSS del elemento principal, aparte de añadir las suyas propias.

Por tanto, y resumiendo lo que hemos visto hasta ahora, tenemos dos cosas claras. Las pseudo clases CSS se refieren a estados de los elementos. Por otro lado, todas las reglas CSS que deban mantenerse para un elemento, con independencia de su estado, se declaran usando un selector que se refiera al elemento sin más. En el selector con el elemento de la pseudo clase se declaran sólo las reglas específicas para ese estado en concreto.

LA PSEUDO CLASE :hover DESDE jQuery

Cómo hemos comentado, el estado de los elementos desde jQuery se controla mediante eventos. Por ejemplo, si lo que acabamos de hacer con CSS lo queremos hacer con jQuery, el código podría ser el siguiente:

Observa que en la línea 17 le damos a los párrafos el alineado justificado. Eso ya queda establecido y se mantiene. En las líneas resaltadas tenemos que detectar dos eventos para poder simular el estado :hover (cuando el ratón entra en el elemento, y cuando sale).

Otra manera de manejar esta pseudo clase con jQuery es a través del método hover(). Este recibe, como argumentos, dos funciones: la primera es la que se ejecuta cuando el puntero se posa sobre el elemento y la segunda la que se ejecuta cuando el puntero abandona el elemento. Observa el siguiente ejemplo, que funciona igual que el anterior:

Como puedes ver, si bien no existe un selector específico para la pseudo clase :hover (en jQuery no se puede referenciar algo del tipo $('p:hover')), si tenemos medios para acceder al estado correspondiente a dicha pseudo clase.

ATENCIÓN. Hay un detalle que debes tener en cuenta a la hora de usar la pseudo clase :hover. Como sabes, se refiere al estado de tener el puntero del ratón sobre un elemento. Cuando tu página sea visitada en dispositivos móviles, recuerda que no hay puntero de ratón, por lo que no podrás sacarle partido.

PSEUDO CLASES DE ENLACES

 Los enlaces son elementos que pueden recibir hasta cuatro pseudo clases específicas. Una de ellas es la pseudo clase :hover que acabamos de conocer. Actúa igual que en cualquier otro elemento: establece reglas CSS que se aplican en el momento que el ratón pasa sobre el enlace. Las otras tres son las siguientes:

  • :link. Define las reglas CSS para un enlace que aún no ha sido visitado (que no se ha pasado por la página a la que apunta).
  • :active. Define las reglas CSS para un enlace en el momento en que se pulsa el ratón. Dado que un enlace, cuando se pulsa, salta a la página de destino, normalmente casi no hay tiempo de apreciar el efecto visual, por lo que esta pseudo clase no suele emplearse.
  • :visited. Define las reglas CSS para un enlace que ya ha sido visitado.

Por ejemplo, podrían definirse los estados de los enlaces como en el siguiente ejemplo:

En jQuery no hay un evento específico para la gestión de estas pseudo clases. Si bien podemos sacarle partido, por ejemplo al evento click (o al método click(), en su caso) la forma de manejar estos estados de los enlaces es mediante CSS.

LA PSEUDO CLASE :checked

Esta se refiere a aquellos elementos de tipo checkbox o radiobutton que están marcados. Observa el siguiente HTML:

Como ves, es muy simple. Solo tiene algunas casillas de verificación (checkbox) y algunos botones de opción (radio). Ahora mira el siguiente CSS:

Observa que nos referimos a los elementos input de tipo checkbox y de tipo radio, pero no a todos los botones de este tipo, sino sólo a los que están marcados (la pseudo clase :checked se refiere a este estado de los elementos sobre los que se aplica, que sólo pueden ser estos dos). Si cargas la página en tu navegador verás que, cuando marcas uno de estos elementos, coge las dimensiones que hemos especificado en las reglas CSS.

A este tipo de elementos (ckeckbox y radiobutton) no se les puede aplicar cualquier estilo. De hecho, la mayoría de los estilos (colores, bordes, etc) no funcionan con estos campos. Tenlo en cuenta.

LA PSEUDO CLASE :checked DESDE jQuery

En jQuery no existe una pseudo clase :checked, como en CSS. Sin embargo, si contamos con la propiedad checked, que devuelve true, si el elemento está marcado, o false, si no lo está. Con esta propiedad, es muy fácil actuar sobre los elementos marcados o desmarcados. Mira el siguiente ejemplo:

Observa el código jQuery (en resaltado). En primer lugar, recorremos todos los elementos de los tipos que nos interesan (con el método each()), para darles sus dimensiones por defecto. A continuación, si el elemento que hemos pulsado ($(this)) tiene activada su propiedad checked, le damos las dimensiones deseadas. Como ves, este código actúa igual que su contraparte CSS.

LA PSEUDO CLASE :empty

Esta pseudo clase afecta a elementos que no tienen contenido. Se pueden definir reglas CSS para contenedores que no tienen contenido. Y esto hay que puntualizarlo. Esta pseudo clase puede aplicarse a elementos p, div, textarea, span, etc. Sin embargo, se reconoce si el elemento tiene o no contenido por el HTML interno que pueda tener, no por su valor. Es decir. Si se lo aplicamos a un textarea, se aplicará la pseudo clase modificando el valor de innerHTML (en javascript), o con el método html() (en jQuery). Sin embargo, no se aplicará o dejará de aplicar la pseudo clase si cambiamos el contenido de la propiedad value, o si escribimos algo en el textarea desde el teclado. Observa el siguiente HTML:

Y el correspondiente CSS:

Cómo ves, en el HTML hay tres cajas de texto vacías y una (la segunda) con contenido. Cuando cargues la página verás la diferencia de aspecto entre unas y otras. Sin embago, también verás que, aunque escribas en las cajas vacías, o borres lo que hay en la segunda, el aspecto que tienen no cambia, manteniendo el que se ha adoptado a la carga de la página. Esto hace que esta pseudo clase no resulte especialmente útil, siendo más práctico gestionar las propiedades CSS de los elementos en tiempo real, desde jQuery.

LA PSEUDO CLASE :focus

Esta sí es una pseudo clase interesante. Afecta en tiempo real a los elementos que tienen el foco. Con el mismo HTML del ejemplo anterior, prueba la siguiente hoja de estilos:

Si ahora cargas tu página, verás que cada vez que, con el ratón o el teclado, sitúas el foco sobre una de las cajas de texto, se pone en rojo, y las demás en blanco. Esta pseudo clase resulta muy útil en formularios con muchos campos, para que el usuario vea, en cada momento, donde está situado.

RESUMEN

PSEUDO CLASES DE ESTADO
SELECTOR COMENTARIOS
:link Se aplican las reglas CSS definidas a los enlaces que aún no han sido visitados por el usuario.
:active Se aplican las reglas CSS definidas a los enlaces activos, es decir, aquellos sobre los que el usuario pulsa el ratón, antes de que lo suelte. El proceso de hacer click en un enlace consiste en pulsar el ratón sobre el mismo y luego soltarlo, momento en que se dispara el enlace y carga la página de destino. El enlace está activo desde que se pulsa el ratón y mientras se mantiente pulsado.
:visited Se aplican las reglas CSS definidas a los enlaces que ya han sido visitados por el usuario.
:hover Se aplican las reglas CSS definidas a cualquier elemento sobre el que pase el puntero del ratón.
:checked Se aplican las reglas CSS definidas aelementos de tipo botones de radio y casillas de verificación cuando están marcados.
:empty Se aplican las reglas CSS definidas a los elementos que pueden tener un contenido y no lo tienen. No se actualiza el estado de dichos elementos en tiempo real, a menos que lo hagamos mediante JavaScript o jQuery.
:focus Se aplican las reglas CSS definidas a los elementos que tienen el foco.
     

Deja un comentario

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