4

PSEUDO-CLASES
PSEUDO-ELEMENTOS

23
 4
PSEUDO-CLASES Y PSEUDO-ELEMENTOS DE CSS

Mediante los Pseudo-clases y pseudo-elementos nos permiten establecer estilo

para ciertos elementos que cumplen una característica en especial dentro de la
estructura del documento, de tal manera que es posible aplicar CSS haciendo uso de
pseudo-clases y pseudo-elementos. ¡En esta entrada desarrollaremos con mayor
detalle sobre lo que son y para qué sirven las pseudo-clases en CSS3, así que ponte
cómodo y! Empezamos ¡
1. ¿QUÉ SON LAS PSEUDO-CLASES EN CSS?
Las pseudoclases son selectores que básicamente nos permiten apuntar a un
elemento específico que cumple una característica determinada. Una pseudoclase
está compuesta por una palabra clave que se escribe empezando con dos puntos
simples; por ejemplo: :first-child o :last-child
a) :first-child
Mediante la pseudo-clase :first-child podemos establecer un determinado
estilo para el primer elemento hijo de un elemento padre.
En el siguiente ejemplo haremos que el primer elemento hijo ubicado dentro
del contenedor div, sea de tipo párrafo, sea de color rojo y tamaño de 20px.

24
 No solo se pueden aplicar a párrafos, sino a cualquier tipo de elementos,
para ello se debe especificar mediante el selector correspondiente, por ejemplo
la primera lista ordenada del cuerpo de la página se indicaría de la siguiente
manera: body ol:first-child.
b) :last-child
La pseudo-clase :last-child nos permite dar estilo al último elemento hijo de
un determinado elemento padre. Básicamente nos ayuda a establecer los estilos
que serán aplicados un determinado tipo de elemento, que sea el último de su
tipo dentro de su elemento padre.
En el siguiente ejemplo aplicaremos un estilo de color rojo y tamaño de letra
de 20px al último párrafo del contenedor <div>

La pseudoclase :last-child se puede aplicar a cualquier otro elemento, por

ejemplo para seleccionar la última imagen de un contenedor div, el selector seria
de la siguiente manera: div img:last-child
c) Por qué usar Pseudoclases:
Una pseudocalse se usa para apuntar o seleccionar a un elemento que
cumple una característica determinada, no es lo mismo que usar un identificador
para dicho elemento y darle un estilo, pues un identificador está asociado al
elemento, mientras una pseudoclase está asociada a una característica.
Por ejemplo, en los ejemplos anteriores, si cambiamos la estructura y el
primer párrafo pasa a otra posición; otro párrafo tomará su lugar y los estilos
establecidos mediante Pseudoclases se mantienen para el nuevo primer

25
 párrafo, no ocurriría lo mismo si se trabajaran con identificadores, en ese
caso el elemento con identificador seguiría manteniendo su estilo definido.
Entonces, en ocasiones se quiere seleccionar elementos que cumplan con
una característica determinada, es ahí donde entra en juego el poder de las
Pseudoclases.
d) Otras pseudoclases de CSS:
Además de :first-child y :last-child, pseudoclases de CSS3 existen otras que
ya conocimos en lecciones de CSS, pero no está de más recordarlas; veamos.
▪ :only-child
▪ :invalid
▪ :hover
▪ :focus
Además de estas existe una larga lista más. Ahora pasemos a desarrollar
los pseudoelementos.
2. ¿QUÉ SON LAS PSEUDO-ELEMENTOS EN CSS?
Los pseudo-elementos están pensados para establecer un estilo a partes
específicas de un elemento, por ejemplo: la primera línea de un texto, la primera letra
de un texto, etc. veamos cuáles son y la forma de aplicarlos. Un pseudoelemento está
formado por una palabra clave antecedida por dos puntos dobles; por ejemplo: ::firt-
line, a continuación conozcamos los agregados en CSS3.
a) ::first-line
El pseudoelemento ::first-line sirve para establecer un estilo a la primera
línea de texto de un elemento seleccionado. La forma de aplicar es simple,
debemos especificar el elemento de texto al que aplicaremos el estilo y definir
el pseudoelemento ::first-line; mejor veamos un ejemplo.
Ejemplo 1.- Se trata de un párrafo, mediante la pseudoclase ::first-line
haremos que la primera línea de texto tenga un estilo determinado, veamos.

26
 Ejemplo 2.- Ahora se trata de dos párrafos ubicados dentro de un
contenedor <div> y otro párrafo fuera del contenedor, mediante el
pseudoelemento ::first-line haremos que las primeras líneas de texto de los
elementos párrafos <p> ubicados dentro del contenedor <div>, tengan un
estilo determinado. Mientras que la que está afuera, no será afectada.

b) ::first-letter
El pseudoelemento ::first-letter permite establecer un estilo para la primera
letra del texto de u elemento de texto, por ejemplo, pueden ser: primeras letras
de párrafos, títulos, subtítulos, etc. La forma de aplicar es bastante sencilla,
simplemente debemos especificar el elemento de texto al que queremos aplicar
y seguirle del pseudoelemento ::first-letter. A continuación, veamos un ejemplo.

27
c) ::selection
El pseudoelemento ::selection nos permite dar estilo a un elemento
seleccionado por el usuario. Para que entiendas te lo explico más fácil, cuando
un usuario selecciona por ejemplo un fragmento de texto en una página web, el
texto seleccionado suele tener un estilo definido, color de texto y fondo cambian
de tal manera que el texto seleccionado puede ser diferenciado del resto. Dicho
estilo puede ser establecido mediante el pseudoelemento ::selection como
veremos a continuación en el ejemplo.

28
3. LA PROPIEDAD CONTENT:
La propiedad content nos permite establecer el contenido que queremos insertar
antes o después de un elemento mediante código CSS; para ello usamos los
pseudoelementos ::before o ::after. Es necesario mencionar esto, pues a continuación
aprenderemos a usar dichos pseudoelementos.
a) Valores para la propiedad contend
La propiedad contend admite varios valores, desde simples cadenas de
texto, enlaces, etc. Veamos las que nos interesan.
 string: básicamente se trata de un texto entre comillas dobles.
 url: permite establecer una dirección URL

b) ::before
El pseudoelemento ::before permite agregar o insertar un contenido antes
de un elemento mediante CSS; para ello simplemente debemos establecer el
elemento (mediante el selector) al que queremos anteceder contenido, luego
mediante la propiedad contend estableceremos el contenido que deseamos
insertar. Mejor veamos algunos ejemplos.
Ejemplo 1.- Solo a modo de ejemplo aplicaremos ::before para insertar un
pedazo de texto antes de un párrafo. No es práctico utilizar ::before para
insertar cadenas de texto mediante CSS.

Ejemplo 2.- En el siguiente ejemplo insertamos una imagen antes de un los

párrafos que estén identificados con el identificador class="text", para ello
indicaremos dichos párrafos mediante su respectivo selector y mediante el
pseudoelemento ::before estableceremos el contenido que le antecederá,
en este caso la propiedad contend contendrá la URL donde se encuentra
dicha imagen, en caso de estar alojado en la misma carpeta que el
documento, se puede especificar directamente el nombre de la imagen con
su respectiva extensión, por ejemplo url("imagen.jpg"), sin embargo en
nuestro caso emplearemos la dirección URL. Veamos.

29
 Ejemplo 3.- El siguiente ejemplo se trata de una lista en la que
mediante CSS haremos que el icono que antecede por defecto a las listas
HTML desaparezca mediante (list-style: none;) y en su lugar insertaremos
un icono personalizado mediante el pseudoelemento ::before y la propiedad
contend, se trata de un emoticón de manzana; veamos.

Ejemplo 4.- En el siguiente ejemplo de ::before insertamos un bloque

de 100px de ancho y 50px de altura, antes de un párrafo, para conseguir el
efecto el valor de la propiedad contend quedará vacía, mediante CSS
estableceremos que dicho contenido sea tipo bloque (display: block;), con
ancho de 100px y altura de 50px, color de fondo azul, veamos.

30
c) ::after
El pseudoelemento ::after sirve para insertar o agregar contenido después
de un elemento HTML especificado en CSS mediante el selector
correspondiente, la forma de hacerla básicamente consiste en indicar el
elemento al que queremos agregar contenido después, luego aplicar el
pseudoelemento ::after y finalmente establecer el contenido a insertar mediante
la propiedad contend y su respectivo valor.
El pseudoelemento ::after básicamente funciona similar al pseudoeleemnto
::before (contenido se inserta antes), pero en el caso de ::after el contenido se
inserta después.
Ejemplo.- Todos los ejemplos aplicados al pseudoelemento ::before, se pueden aplicar a
::after, simplemente cambiando before por after, por ende ya puedes probar con todos los
ejemplos que anteriormente conocimos. Por ejemplo, tomemos el ejemplo de la lista con
pseudoelemento en modo after.

31