10.1 Pseudoclases
Las pseudoclases y pseudo-elementos en HTML y CSS permiten estilizar elementos en función de su estado o contenido, sin necesidad de añadir clases adicionales o cambiar la estructura del documento HTML. Proporcionan herramientas geniales para crear páginas web interactivas y visualmente atractivas.
Las pseudoclases se aplican a elementos en función de su estado o posición en la estructura del documento. Ayudan a estilizar elementos en diversas situaciones, como cuando el puntero pasa sobre ellos, cuando están enfocados o seleccionados. Las pseudoclases comienzan con dos puntos (:).
Las pseudoclases más simples:
La pseudoclase :hover se aplica a un elemento cuando el usuario pasa el cursor sobre él.
<button type="button">Botón</button>
button:hover {
color: red;
}
La pseudoclase :focus se aplica a un elemento cuando recibe el foco, por ejemplo, al hacer clic en un campo de entrada.
<input type="text">
input:focus {
outline-color: blue;
}
La pseudoclase :active se aplica a un elemento cuando está activo, por ejemplo, al hacer clic en un enlace o botón.
<button type="button">Botón</button>
button:active {
background-color: green;
}
La pseudoclase :visited se aplica a enlaces que el usuario ya ha visitado.
<a href="#">Enlace</a>
a:visited {
color: purple;
}
10.2 Pseudo-elementos
Los pseudo-elementos permiten estilizar partes de elementos que no son elementos HTML separados. Comienzan con doble dos puntos (::). Los pseudo-elementos se usan para crear y estilizar contenido antes o después de un elemento, resaltar la primera línea o la primera letra de un elemento, entre otras cosas.
Los pseudo-elementos más simples:
El pseudo-elemento ::before inserta contenido antes del contenido de un elemento.
<p>Me llamo Stepan.</p>
p::before {
content: "¡Hola! ";
color: blue;
}
El pseudo-elemento ::after inserta contenido después del contenido de un elemento.
<p>¡Atención!</p>
p::after {
content: " ¡Gracias por tu atención!";
color: red;
}
El pseudo-elemento ::first-line se aplica a la primera línea de un elemento. Permite estilizar solo la primera línea de texto.
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
p::first-line {
font-weight: bold;
color: green;
}
El pseudo-elemento ::selection se aplica al texto seleccionado por el usuario.
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
::selection {
background-color: blue;
color: yellow;
}
Intenta seleccionar texto en el resultado.
10.3 Ejemplos de uso de pseudo-elementos
Las pseudoclases y los pseudo-elementos en HTML y CSS ofrecen grandes oportunidades para estilizar elementos en función de su estado o contenido. Permiten crear páginas web más interactivas y visualmente atractivas sin cambiar la estructura de HTML.
Ejemplo 1: Insertar un icono antes del texto del enlace
<html>
<head>
<style>
a::before {
content: "🔗";
margin-right: 5px;
}
</style>
</head>
<body>
<a href="#">Este es un enlace con icono</a>
</body>
</html>
Ejemplo 2: Añadir un bloque estilizado después de un párrafo
<html>
<head>
<style>
p::after {
content: "🌟";
display: block;
text-align: center;
margin-top: 10px;
}
</style>
</head>
<body>
<p>Este es un párrafo de texto.</p>
</body>
</html>
Combinación
Las pseudoclases y pseudo-elementos se pueden combinar para crear estilos complejos y potentes.
Ejemplo: Estilizar texto seleccionado dentro de un enlace al pasar el cursor
<html>
<head>
<style>
a:hover::selection {
background-color: lightblue;
color: navy;
}
</style>
</head>
<body>
<a href="#">Selecciona este texto y luego pasa el puntero sobre él.</a>
</body>
</html>
GO TO FULL VERSION