En este artículo vamos a explicar qué son los pseudoelementos CSS, para qué se utilizan y cómo funcionan en el diseño de páginas HTML. En un articulo anterior hemos visto que los selectores CSS se utilizan para seleccionar elementos HTML en función de su tipo, clase, ID, jerarquía y atributos. Ahora veremos que los pseudoelementos CSS se utilizan para seleccionar partes específicas dentro de un elemento HTML y aplicar estilos a esas partes o agregar contenido adicional.
Ambos, selectores y pseudoelementos, son herramientas importantes para diseñar y personalizar la apariencia de páginas web y este artículo está relacionado con los artículos selectores CSS y pseudoclases CSS publicados anteriormente.
Los pseudoelementos en CSS son selectores especiales que permiten seleccionar y estilizar partes específicas de un elemento HTML. A diferencia de los selectores regulares, que seleccionan elementos completos, los pseudoelementos te permiten aplicar estilos a partes internas o generadas dinámicamente en un elemento sin necesidad de modificar directamente el contenido HTML.
Los pseudoelementos se indican con dos puntos :: seguidos de un nombre que representa la parte del elemento HTML que deseas seleccionar. Algunos ejemplos comunes se utilizan para agregar contenido o estilos antes o después del contenido de un elemento HTML seleccionado. La característica básica de los pseudoelementos CSS es que se aplican a elementos individuales y no a grupos de elementos como los selectores normales.
Índice de pseudoelementos CSS
Los pseudoelementos CSS son útiles para agregar elementos decorativos o generar contenido adicional de manera dinámica. Vamos a ver y explicar cada uno de ellos con ejemplos a continuación:
::before::after::first-line::first-letter::selection::placeholder::marker::first-of-type::last-of-type::nth-child()::nth-last-child()::not()::root::target
Pseudoelemento ::before
El pseudoelemento ::before en CSS se utiliza para insertar contenido antes del contenido de un elemento seleccionado. Se utiliza comúnmente para agregar contenido decorativo o visual antes del contenido real de un elemento, sin tener que modificar directamente el HTML. Un ejemplo de CSS que utiliza el pseudoelemento ::before sería.
Estilos CSS utilizando ::before
/* Estilos para el pseudoelemento ::before */
p::before {
content: "Antes"; /* Agrega el texto "Antes" antes del contenido real de todos los párrafos */
font-weight: bold; /* Establece el peso de la fuente en negrita */
color: blue; /* Establece el color del texto en azul */
}En este ejemplo, p::before se utiliza para agregar el texto «Antes» antes del contenido real de todos los párrafos.
Ejemplo HTML de aplicación ::before
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="estilos.css">
</head>
<body>
<p>Este es un párrafo de ejemplo.</p>
</body>
</html>En este ejemplo HTML, el pseudoelemento ::before se aplica al párrafo, lo que agrega el texto «Antes» antes del contenido real del párrafo. De esta forma se puede utilizar el pseudoelemento ::before para agregar contenido adicional o decorativo a un elemento sin modificar directamente el HTML.
Pseudoelemento ::after
El pseudoelemento ::after en CSS se utiliza para insertar contenido después del contenido de un elemento seleccionado. Al igual que ::before, ::after se utiliza para agregar contenido adicional o decorativo al final del contenido real de un elemento, sin modificar directamente el HTML. Un ejemplo de CSS que utiliza el pseudoelemento ::after sería.
Estilos CSS utilizando ::after
/* Estilos para el pseudoelemento ::after */
p::after {
content: " Después"; /* Agrega el texto " Después" después del contenido real de todos los párrafos */
font-style: italic; /* Establece el estilo de fuente en cursiva */
color: red; /* Establece el color del texto en rojo */
}En este ejemplo de CSS, p::after se utiliza para agregar el texto » Después» después del contenido real de todos los párrafos.
Ejemplo HTML de aplicación de ::after
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="estilos.css">
</head>
<body>
<p>Este es un párrafo de ejemplo.</p>
</body>
</html>En este ejemplo HTML, el pseudoelemento ::after se aplica al párrafo, lo que agrega el texto » Después» después del contenido real del párrafo. Así, podemos utilizar el pseudoelemento ::after para agregar contenido adicional o decorativo al final de un elemento sin modificar directamente el HTML.
Pseudoelemento ::first-line
El pseudoelemento ::first-line en CSS se utiliza para aplicar estilos específicos a la primera línea de un bloque de texto. Este pseudoelemento se puede usar para cambiar propiedades como el tamaño de la fuente, el color del texto o el espaciado entre palabras para la primera línea de un bloque de texto. Un ejemplo de CSS que utiliza el pseudoelemento ::first-line sería.
Estilos CSS utilizando ::first-line
/* Estilos para el pseudoelemento ::first-line */
p::first-line {
font-weight: bold; /* Establece el peso de la fuente en negrita para la primera línea */
color: red; /* Establece el color del texto en rojo para la primera línea */
}En este ejemplo de CSS, p::first-line se utiliza para aplicar estilos específicos a la primera línea de todos los párrafos.
Ejemplo HTML de aplicación de ::first-line
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="estilos.css">
</head>
<body>
<p>Esta es la primera línea de un párrafo de ejemplo que muestra cómo se pueden aplicar estilos utilizando el pseudoelemento ::first-line en CSS.</p>
</body>
</html>En este ejemplo HTML, el pseudoelemento ::first-line se aplica al párrafo, lo que establece el peso de la fuente en negrita y cambia el color del texto a rojo para la primera línea. De esta manera se puede utilizar el pseudoelemento ::first-line para aplicar estilos específicos a la primera línea de un bloque de texto.
Pseudoelemento ::first-letter
El pseudoelemento ::first-letter en CSS se utiliza para aplicar estilos específicos a la primera letra de un bloque de texto. Este pseudoelemento se puede utilizar para cambiar propiedades como el tamaño de la fuente, el color del texto o el espaciado para la primera letra de un bloque de texto. Un ejemplo de CSS que utiliza el pseudoelemento ::first-letter sería.
Estilos CSS utilizando ::first-letter
/* Estilos para el pseudoelemento ::first-letter */
p::first-letter {
font-size: 24px; /* Establece el tamaño de la primera letra en 24 píxeles */
color: blue; /* Establece el color de la primera letra en azul */
}En este ejemplo de CSS, p::first-letter se utiliza para aplicar estilos específicos a la primera letra de todos los párrafos.
Ejemplo HTML de aplicación ::first-letter
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="estilos.css">
</head>
<body>
<p>Este es un ejemplo de texto donde se aplican estilos utilizando el pseudoelemento ::first-letter en CSS.</p>
</body>
</html>En este ejemplo HTML, el pseudoelemento ::first-letter se aplica al párrafo, lo que establece el tamaño de la primera letra en 24 píxeles y cambia el color del texto a azul. Con esto podemos utilizar el pseudoelemento ::first-letter para aplicar estilos específicos a la primera letra de un bloque de texto.
Pseudoelemento ::selection
El pseudoelemento ::selection en CSS se utiliza para aplicar estilos a porciones de texto seleccionadas por el usuario. Permite definir estilos específicos que se aplicarán a la porción de texto seleccionada por el usuario en la página web. Un ejemplo de CSS que utiliza el pseudoelemento ::selection sería.
Estilos CSS utilizando ::selection
/* Estilos para el pseudoelemento ::selection */
::selection {
background-color: lightblue; /* Establece el color de fondo de la selección en azul claro */
color: black; /* Establece el color del texto seleccionado en negro */
}En este ejemplo de CSS, ::selection se utiliza para aplicar estilos específicos a la porción de texto seleccionada por el usuario.
Ejemplo HTML de aplicación ::selection
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="estilos.css">
</head>
<body>
<p>Selecciona este texto para ver cómo se aplican los estilos utilizando el pseudoelemento ::selection en CSS.</p>
</body>
</html>En este ejemplo HTML, el pseudoelemento ::selection se aplica al texto del párrafo, lo que establece el color de fondo de la selección en azul claro y el color del texto seleccionado en negro. Esto demuestra cómo se puede utilizar el pseudoelemento ::selection para aplicar estilos específicos a la porción de texto seleccionada por el usuario en la página web.
Pseudoelemento ::placeholder
El pseudoelemento ::placeholder en CSS se utiliza para aplicar estilos al texto de marcador de posición en un campo de entrada. Permite cambiar el color, la fuente y otros estilos del texto que aparece como marcador de posición dentro del campo de entrada antes de que el usuario ingrese cualquier valor. Un ejemplo de CSS que utiliza el pseudoelemento ::placeholder sería.
Estilos CSS usando ::placeholder
/* Estilos para el pseudoelemento ::placeholder */
input::placeholder {
color: red; /* Establece el color del marcador de posición en rojo */
font-style: italic; /* Establece el estilo de la fuente en cursiva para el marcador de posición */
}En este ejemplo de CSS, input::placeholder se utiliza para aplicar estilos específicos al texto de marcador de posición en un campo de entrada.
Ejemplo HTML de aplicación ::placeholder
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="estilos.css">
</head>
<body>
<input type="text" placeholder="Introduce tu nombre aquí">
</body>
</html>En este ejemplo HTML, el pseudoelemento ::placeholder se aplica al campo de entrada de texto, lo que establece el color del texto del marcador de posición en rojo y el estilo de la fuente en cursiva. Así podemos utilizar el pseudoelemento ::placeholder para aplicar estilos al texto de marcador de posición en un campo de entrada.
Pseudoelemento ::marker
El pseudoelemento ::marker en CSS se utiliza para aplicar estilos al marcador de lista, como viñetas o números, de un elemento de lista. Permite cambiar la apariencia del marcador de lista de un elemento li en una lista ordenada o desordenada. Un ejemplo de CSS que utiliza el pseudoelemento ::marker sería.
Estilos CSS usando ::marker
/* Estilos para el pseudoelemento ::marker */
li::marker {
color: blue; /* Establece el color del marcador de lista en azul */
font-weight: bold; /* Establece el peso de la fuente en negrita para el marcador de lista */
}En este ejemplo de CSS, li::marker se utiliza para aplicar estilos específicos al marcador de lista de los elementos li.
Ejemplo HTML de aplicación ::marker
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="estilos.css">
</head>
<body>
<ul>
<li>Elemento de lista 1</li>
<li>Elemento de lista 2</li>
<li>Elemento de lista 3</li>
</ul>
</body>
</html>En este ejemplo HTML, el pseudoelemento ::marker se aplica a los elementos de lista, lo que establece el color del marcador de lista en azul y el peso de la fuente en negrita. De manera que se puede utilizar el pseudoelemento ::marker para aplicar estilos al marcador de lista de un elemento li.
Pseudoelemento ::first-of-type
El pseudoelemento ::first-of-type en CSS se utiliza para seleccionar el primer elemento de un tipo específico entre los elementos secundarios de su padre. Este pseudoelemento es útil cuando se quiere aplicar un estilo específico al primer elemento de un tipo determinado dentro de su contenedor. Un ejemplo de CSS que utiliza el pseudoelemento ::first-of-type sería.
Estilos CSS usando ::first-of-type
/* Estilos para el pseudoelemento ::first-of-type */
div p:first-of-type {
font-weight: bold; /* Establece el peso de la fuente en negrita para el primer párrafo dentro de cada div */
}En este ejemplo de CSS, div p:first-of-type se utiliza para seleccionar el primer párrafo dentro de cada elemento div.
Ejemplo HTML de aplicación ::first-of-type
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="estilos.css">
</head>
<body>
<div>
<p>Primer párrafo dentro de un div.</p>
<p>Segundo párrafo dentro del mismo div.</p>
<span>Este no es un párrafo, por lo que no se verá afectado por el selector.</span>
</div>
<div>
<p>Primer párrafo dentro de otro div.</p>
<p>Segundo párrafo dentro del mismo div.</p>
</div>
</body>
</html>En este ejemplo HTML, el pseudoelemento ::first-of-type se aplica al primer párrafo dentro de cada elemento div, lo que establece el peso de la fuente en negrita. Esto demuestra cómo se puede utilizar el pseudoelemento ::first-of-type para aplicar estilos específicos al primer elemento de un tipo específico entre los elementos secundarios de su padre.
Pseudoelemento ::last-of-type
El pseudoelemento ::last-of-type en CSS se utiliza para seleccionar el último elemento de un tipo específico entre los elementos secundarios de su padre. Este pseudoelemento es útil cuando se desea aplicar un estilo específico al último elemento de un tipo determinado dentro de su contenedor. Un ejemplo de CSS que utiliza el pseudoelemento ::last-of-type sería.
Estilos CSS usando ::last-of-type
/* Estilos para el pseudoelemento ::last-of-type */
div p:last-of-type {
color: red; /* Establece el color rojo para el último párrafo dentro de cada div */
}En este ejemplo de CSS, div p:last-of-type se utiliza para seleccionar el último párrafo dentro de cada elemento div.
Ejemplo HTML de aplicación ::last-of-type
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="estilos.css">
</head>
<body>
<div>
<p>Primer párrafo dentro de un div.</p>
<p>Segundo párrafo dentro del mismo div.</p>
<span>Este no es un párrafo, por lo que no se verá afectado por el selector.</span>
</div>
<div>
<p>Primer párrafo dentro de otro div.</p>
<p>Segundo párrafo dentro del mismo div.</p>
<p>Último párrafo dentro del mismo div.</p>
</div>
</body>
</html>En este ejemplo HTML, el pseudoelemento ::last-of-type se aplica al último párrafo dentro de cada elemento div, lo que establece el color rojo. Con esto podemos utilizar el pseudoelemento ::last-of-type para aplicar estilos específicos al último elemento de un tipo específico entre los elementos secundarios de su padre.
Pseudoelementos CSS ::nth-child()
El pseudoelemento ::nth-child() en CSS se utiliza para seleccionar elementos específicos basados en su posición en relación con sus hermanos. Permite aplicar estilos a elementos individuales o a un patrón repetitivo de elementos. Puedes definir el patrón exacto utilizando la fórmula an + b, donde n es el número de elementos y a y b son valores constantes. Un ejemplo de CSS que utiliza el pseudoelemento ::nth-child(), junto con su aplicación HTML sería:
Estilos CSS usando ::nth-child()
/* Estilos para el pseudoelemento ::nth-child() */
ul li:nth-child(2n) {
color: blue; /* Establece el color azul para los elementos pares de la lista */
}En este ejemplo de CSS, ul li:nth-child(2n) se utiliza para seleccionar los elementos pares de la lista ul.
Ejemplo HTML de aplicación ::nth-child()
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="estilos.css">
</head>
<body>
<ul>
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
<li>Elemento 4</li>
<li>Elemento 5</li>
<li>Elemento 6</li>
</ul>
</body>
</html>En este ejemplo HTML, el pseudoelemento ::nth-child() se aplica a los elementos li de una lista ul, estableciendo el color azul para los elementos pares. Esto demuestra cómo se puede utilizar el pseudoelemento ::nth-child() para aplicar estilos a elementos específicos o patrones repetitivos de elementos en una estructura de HTML.
Diferencias con el selector :nth-child()
La pseudoclase :nth-child() y el pseudoelemento ::nth-child() son bastante similares en su funcionalidad. Ambos se utilizan para seleccionar elementos específicos basados en su posición en relación con sus hermanos. La principal diferencia entre los dos radica en cómo se aplican en CSS.
- La pseudoclase
:nth-child()se utiliza para seleccionar elementos específicos en una lista de elementos, y el estilo se aplica directamente al elemento seleccionado. - El pseudoelemento
::nth-child()se utiliza para generar contenido estilizado adicional para elementos específicos en una lista de elementos, creando efectivamente un nuevo elemento en el árbol DOM.
Consideremos el siguiente caso:
Estilos CSS pseudoclase :nth-child()
/* Estilos para la pseudoclase :nth-child() */
ul li:nth-child(2n) {
color: blue; /* Establece el color azul para los elementos pares de la lista */
}En este caso, el estilo se aplicará directamente a los elementos li que cumplan la condición de ser el segundo elemento, el cuarto elemento, y así sucesivamente, de la lista ul.
Estilos CSS pseudoelemento ::nth-child()
/* Estilos para el pseudoelemento ::nth-child() */
ul li::nth-child(2n) {
content: " - incluso"; /* Añade contenido " - incluso" a los elementos pares de la lista */
color: red; /* Establece el color rojo para el contenido añadido */
}En este caso, el pseudoelemento ::nth-child() agrega contenido adicional al elemento li que cumple la condición especificada, creando así un nuevo elemento en el árbol DOM.
Ambos selectores son herramientas valiosas para aplicar estilos específicos a elementos basados en su posición en una lista, pero tienen diferencias sutiles en cuanto a cómo se aplican los estilos.
Pseudoelementos CSS ::nth-last-child()
El pseudoelemento ::nth-last-child() en CSS se utiliza para seleccionar elementos específicos basados en su posición contando desde el final de un conjunto de elementos secundarios. Esto puede ser útil cuando se desea aplicar un estilo a un elemento que ocupa una posición específica contando desde el final de su contenedor. Un ejemplo de CSS que utiliza el pseudoelemento ::nth-last-child() sería.
Estilos CSS usando ::nth-last-child()
/* Estilos para el pseudoelemento ::nth-last-child() */
ul li:nth-last-child(2) {
color: red; /* Establece el color rojo para el segundo elemento desde el final de la lista */
}En este ejemplo de CSS, ul li:nth-last-child(2) se utiliza para seleccionar el segundo elemento desde el final de la lista ul.
Ejemplo HTML de aplicación ::nth-last-child()
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="estilos.css">
</head>
<body>
<ul>
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
<li>Elemento 4</li>
<li>Elemento 5</li>
<li>Elemento 6</li>
</ul>
</body>
</html>En este ejemplo HTML, el pseudoelemento ::nth-last-child() se aplica a los elementos li de una lista ul, estableciendo el color rojo para el segundo elemento desde el final de la lista. De manera que podemos utilizar el pseudoelemento ::nth-last-child() para aplicar estilos a elementos específicos contando desde el final de una lista de elementos secundarios.
Al igual que el pseudoelemento ::nth-child(), el pseudolemento ::nth-last-child() tiene las mismas diferencias sutiles que la pseudoclase :nth-last-child(), con la posibilidad de agregar contenido adicional al elemento li que cumple la condición especificada, creando así un nuevo elemento en el árbol DOM.
Pseudoelementos CSS ::not()
El pseudoelemento ::not() en CSS se utiliza para seleccionar elementos que no coinciden con un selector específico. Esto es útil cuando se desea aplicar estilos a un grupo de elementos, pero se desea excluir ciertos elementos que coinciden con un selector en particular. Un ejemplo de CSS que utiliza el pseudoelemento ::not(), junto con su aplicación HTML sería.
Estilos CSS usando ::not()
/* Estilos para el pseudoelemento ::not() */
p:not(.destacado) {
color: black; /* Establece el color de texto a negro para todos los párrafos que no tienen la clase 'destacado' */
}En este ejemplo de CSS, p:not(.destacado) se utiliza para seleccionar todos los elementos p que no tienen la clase destacado.
Ejemplo HTML de aplicación ::not()
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="estilos.css">
</head>
<body>
<p class="destacado">Este es un párrafo destacado.</p>
<p>Este es un párrafo normal.</p>
<p>Este es otro párrafo normal.</p>
<p class="destacado">Este es otro párrafo destacado.</p>
</body>
</html>En este ejemplo HTML, el pseudoelemento ::not() se aplica a los elementos p, estableciendo el color de texto en negro para todos los párrafos que no tienen la clase destacado. Esto demuestra cómo se puede utilizar el pseudoelemento ::not() para aplicar estilos a un grupo de elementos mientras se excluyen elementos específicos que coinciden con un selector en particular.
Es importante entender esta distinción entre la pseudoclase :not() y el pseudoelemento ::not(), puesto que el primero se utiliza principalmente para aplicar estilos a un grupo de elementos excluyendo aquellos que coinciden con un selector específico, mientras que ::not() puede ser utilizado para generar contenido adicional en el DOM para los elementos seleccionados.
Pseudolementos CSS ::root
El pseudoelemento ::root en CSS se utiliza para seleccionar el elemento raíz de un documento HTML. Este pseudoelemento se aplica al elemento <html> y se utiliza para aplicar estilos a nivel de documento. Un ejemplo de CSS que utiliza el pseudoelemento ::root, junto con su aplicación HTML sería.
Estilos CSS usando ::root
/* Estilos para el pseudoelemento ::root */
:root {
font-size: 16px; /* Establece el tamaño de fuente a 16 píxeles para el elemento raíz */
color: black; /* Establece el color de texto a negro para el elemento raíz */
}En este ejemplo de CSS, :root se utiliza para seleccionar el elemento raíz, y se aplican estilos como el tamaño de fuente y el color de texto.
Ejemplo HTML de aplicación ::root
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="estilos.css">
</head>
<body>
<h1>Título de la página</h1>
<p>Este es un párrafo en el documento.</p>
</body>
</html>En este ejemplo HTML, el pseudoelemento ::root se utiliza para aplicar estilos a nivel de documento, estableciendo el tamaño de fuente y el color de texto para el documento HTML en su conjunto. Así podemos utilizar el pseudoelemento ::root para aplicar estilos específicos al elemento raíz de un documento HTML.
Pseudoelementos CSS ::target
El pseudoelemento ::target en CSS se utiliza para aplicar estilos a un elemento enlazado, que se convierte en el destino de la URL actual. Este pseudoelemento es especialmente útil al trabajar con enlaces internos y se activa cuando el identificador del enlace se utiliza en la URL. Un ejemplo de CSS que utiliza el pseudoelemento ::target, junto con su aplicación HTML sería
Estilos CSS usando ::target
/* Estilos para el pseudoelemento ::target */
:target {
background-color: yellow; /* Establece el color de fondo en amarillo para el elemento enlazado objetivo */
font-weight: bold; /* Establece el peso de la fuente en negrita para el elemento enlazado objetivo */
}En este ejemplo de CSS, :target se utiliza para seleccionar y aplicar estilos al elemento enlazado objetivo.
Ejemplo HTML de aplicación ::target
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="estilos.css">
</head>
<body>
<h1 id="section1">Sección 1</h1>
<p><a href="#section1">Ir a la Sección 1</a></p>
</body>
</html>En este ejemplo HTML, el pseudoelemento ::target se utiliza para aplicar estilos al elemento enlazado cuando se utiliza el identificador en la URL para navegar a esa sección específica. En este caso, cuando se hace clic en el enlace «Ir a la Sección 1», el encabezado <h1> con el id «section1» se resaltará con un fondo amarillo y un texto en negrita. De esta forma se puede utilizar el pseudoelemento ::target para aplicar estilos específicos a un elemento enlazado en función de la URL actual.
Resumen de Pseudoelementos CSS
Los pseudoelementos en CSS son una parte crucial para aplicar estilos específicos a partes de un elemento que no existen en el árbol DOM inicial. Se utilizan para crear efectos y estilos visuales que no son posibles con los selectores de elementos regulares. Permitiendo a los desarrolladores implementar diseños y efectos más sofisticados en sus páginas web, lo que aumenta la flexibilidad y creatividad en el diseño y la presentación de contenido.
Estos pseudoelementos permiten seleccionar partes específicas de elementos HTML o aplicar estilos condicionales en función de la posición o características de los elementos en la página. Cada uno tiene su propósito y uso específico en el diseño y estilización de páginas web.
¡ Espero que este artículo sea de vuestro interés !