Selectores CSS y jQuery (III). Pseudo elementos.

Facebooktwittergoogle_pluslinkedinmailFacebooktwittergoogle_pluslinkedinmail

En este artículo tratamos un tema con el que no todo el mundo se siente cómodo, pero que nos ayuda mucho a la hora de programar CSS: los pseudo elementos. Se trata de partes complementarias de un elemento que van asociadas a éste y nos permiten manipular determinadas partes de dicho elemento, sin afectar al resto del mismo. Para aclararnos. Supongamos que tenemos un párrafo de texto en el que queremos que la primera línea aparezca en un color distinto al resto del texto, o con un título en negrita precediéndolo. Si bien todo esto puede hacerse mediante código, es mucho más engorroso y, en ocasiones, inviable desde el punto de vista práctico. Los selectores de pseudo elementos nos ayudan a hacerlo de una forma cómoda, rápida y eficiente.

LOS PSEUDO ELEMENTOS ::before Y ::after

Todos los elementos HTML tienen estos dos pseudo elementos. No se trata de nada “visible” (al menos, hata que especifiquemos un contenido). Se traa de unas zonas delante (::before) y detrás (::after) del elemento, que podemos usar para agregar reglas CSS concretas.En realidad, ningún elemento de un documento web es un ente único, sino que responde a la siguiente estructura:

::before El propio elemento ::after

Todos los elementos de un documento web tienen estos complementos, delante y detrás, que podemos manipular mediante CSS dándoles características propias.

Lo veremos claro con unos ejemplos. Supongamos el siguiente código HTML:

Cómo ves, se referencia un archivo de estilos en la misma ruta del HTML, con un contenido muy breve (de momento):

Observa el resultado a continuación:

Cómo ves, antes de cada páraffo se ha añadido la palabra Contenido: en negrita. Esta no está en los párrafos en sí, tal como puedes comprobar en el HTML, sino en la hoja de estilos, como valor del atributo content del pseudo elemento con el que hemos construido la regla.

Podemos usar esta técnica para lograr ciertos resultados. Observa el siguiente CSS alternativo:

Cada párrafo tiene ahora el aspecto que ves a continuación:

Lo mismo podemos hacer con el pseudo elemento ::after, si lo que queremos es establecer un contenido detrás del elemento afectado.

Un punto importantísimo que debes recordar es que las reglas de los pseudo elementos ::before y ::after deben incluir, siempre, el atributo content, o no funcionarán.

LOS PSEUDO ELEMENTOS ::first-letter y ::first-line

Estos se refieren a reglas CSS que podemos aplicar a la primera letra o a la primera línea de un elemento con contenido textual. Observa el siguiente HTML:

Y ahora, el correspondiente CSS:

El resultado es que cada párrafo (cada elemento p) tendrá un aspecto como el que ves a continuación:

Cómo puedes comprobar, manipulamos la primera línea y la primera letra de cada párrafo.

PSEUDO ELEMENTOS Y jQuery

Los pseudo elementos nos permiten añadir características complementarias a nuestros elementos, pero recuerda que no son realmente elementos de la página, sino “partes” colaterales de dichos elementos. Por lo tanto, no pueden ser manipulados directamente por jQuery. Sin embargo, si tenemos cierta capacidad limitada a través del atributo content de ::before y ::after (los pseudo elementos ::first-line y ::first-letter no son manipulables en modo alguno desde jQuery).

Observa el siguiente CSS:

Fíjate en el valor de content en la línea resaltada. En lugar de un contenido específico, le hemos asignado, como valor, el atributo data-content, y este si puede ser modificado para el elemento en jQuery, cómo vemos a continuación:

Observa en las líneas resaltadas en jQuery cómo actuamos sobre el atributo data-content del elemento, no del pseudo elemento, que no es seleccionable desde jQuery. Sin embargo, como en el CSS el data-content está asociado al pseudo elemento, indirectamente estamos actuando sobre este.

EL PSEUDO ELEMENTO ::selection

Este es un caso especial de pseudo elemento. La normalización del W3C lo define como tal, y así se emplea, aunque algunos desarrolladores consideramos que debería haber sido definido como pseudo clase. El caso es el siguiente: se refiere a un elemento (o una parte de este) que ha sido seleccionado con el mouse (pulsar y arrastrar) o con el teclado. Observa el siguiente CSS:

Si pruebas esta hoja de estilos con el HTML que hemos estado usando, verás que, cuando selecciones un párrafo o parte de este, se aplican las reglas definidas bajo el pseudo elemento ::selection.

ANOTACIÓN FINAL

Observa que los pseudo elementos los precedemos con un doble signo de dos puntos (::). En muchos libros los verás con un signo simple de dos puntos (:). Esta era la notación aprobada para CSS2 pero, aunque, en algunos navegadores, todavía funciona por razones de retrocompatibilidad, nosotros empleamos la notación de CSS3.

RESUMEN

PSEUDO ELEMENTOS
TIPO DE SELECTOR COMENTARIOS
::before Se refiere al añadido que se puede incluir antes de cada elemento.
::after Se refiere al añadido que se puede incluir después de cada elemento.
::first-letter Se refiere a la primera letra del contenido literal de un elemento.
::first-line Se refiere a la primera línea del contenido literal de un elemento.
::selection Se refiere al elemento (o una parte de este) que es seleccionada con el ratón.
     

Deja un comentario

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