Introducción a las pseudoclases y pseudoelementos de CSS
Puede utilizar selectores CSS para orientar y diseñar elementos dentro de una página web. Un selector estándar puede apuntar a un párrafo específico o a todos los encabezados en un cierto nivel. Los pseudo selectores llevan las cosas un paso más allá, permitiéndole apuntar a partes de la página con más matices.
Las pseudoclases apuntan a diferentes estados de un elemento: cuando el puntero se desplaza sobre un enlace, por ejemplo. Los pseudoelementos le permiten apuntar a una parte específica de un elemento, como la primera línea de un párrafo.
Entonces, sin más preámbulos, expliquemos los conceptos básicos de las pseudoclases y los pseudoelementos.
¿Qué es una pseudoclase?
Una pseudoclase es un selector de CSS que selecciona elementos HTML en un estado específico. Algunos estados se refieren al contexto, como el primer elemento de su tipo. Otros son de comportamiento, como cuando el puntero del mouse sobre un enlace se desplaza. Le permiten diseñar contenido en función de las acciones de un usuario. Los estados contextuales, en particular, lo ayudan a escribir código flexible, fácil de mantener y limpio. Los estados de comportamiento ofrecen un atajo para la funcionalidad para la que de otro modo tendría que usar JavaScript.
Se puede reconocer fácilmente pseudo-clases a medida que empiezan con dos puntos (:). Veamos algunas instancias de pseudoclases simples y de acción del usuario.
Ejemplo simple de pseudoclase
Primero, escribamos código HTML.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Pseudo-class and Pseudo-element</title>
</head>
<body>
<header>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</header>
<section>
<p>
Voluptatum fuga, impedit sequi totam numquam assumenda repellat
tempora sapiente! Nihil unde vel recusandae, expedita aperiam tempora
totam deserunt non porro reprehenderit.
</p>
<p>
Dicta totam non iusto labore sapiente numquam hic tempora earum,
minima repellendus pariatur fugit nobis ex adipisci, tempore vitae
laboriosam harum. Quidem!
</p>
<p>
Suscipit repellendus cupiditate dignissimos eveniet beatae quas
laudantium, laboriosam minus iusto, corporis ullam alias porro sequi
necessitatibus autem ipsam debitis libero sapiente!
</p>
<p>
Iste iure deserunt vel? Nisi omnis quo quibusdam inventore delectus.
Molestias exercitationem in quia possimus consectetur dolorum sequi
veniam quo corporis ullam?
</p>
<p>
Suscipit repellendus cupiditate dignissimos eveniet beatae quas
laudantium, laboriosam minus iusto, corporis ullam alias porro sequi
necessitatibus autem ipsam debitis libero sapiente!
</p>
<p>
Iste iure deserunt vel? Nisi omnis quo quibusdam inventore delectus.
Molestias exercitationem in quia possimus consectetur dolorum sequi
veniam quo corporis ullam?
</p>
<p>
Asperiores illum beatae dolores, dolore quae exercitationem laudantium,
officia nam distinctio tempora deleniti itaque quibusdam iste quo eaque
reiciendis nostrum saepe aperiam?
</p>
</section>
</body>
</html>
Observe que hay varios párrafos dentro de la misma sección. Para diseñarlos individualmente, puede asignar una clase separada a cada uno y usar un selector de clases CSS. Pero esto no es muy práctico, especialmente si el contenido puede cambiar con frecuencia. En su lugar, puede usar pseudoclases que no existen en el HTML pero que aún le permiten orientar y diseñar los elementos. Vamos a ver cómo funciona:
CSS
body {
font-size: 1em;
}
header {
font-size: 3em;
}
/* Selecting the first paragraph */
p:first-child {
font-size: 1.3em;
}
/* Selecting the last paragraph */
p:last-child {
color: red;
text-decoration: underline;
}
/* Selecting the nth paragraph */
p:nth-child(3) {
color: blue;
font-style: italic;
}
p:nth-child(4) {
color: #666;
font-size: 1.9em;
}
p:nth-child(5) {
color: yellowgreen;
font-weight: bold;
}Producción:
Usando pseudoclases simples como : first-child ,: nth-child (x) y ,: last-child , podemos seleccionar y diseñar fácilmente los párrafos. Tenga en cuenta que estas pseudoclases seleccionan los párrafos en sí mismos, no sus elementos secundarios.
Ejemplo de pseudoclase de acción de usuario
Las pseudoclases de comportamiento o acción del usuario solo se aplican cuando el usuario interactúa con el documento. Uno de los ejemplos más populares incluye : enlace ,: visitado ,: hover y : estados de enfoque . Veamos el ejemplo de estado : hover para un enlace y una imagen.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Pseudo-class and Pseudo-element</title>
</head>
<body>
<div class="image-box">
<img class="image-back" src="images/By_Unsplash_Search.jpg" alt="Coding on a laptop" />
<img class="img-front" src="images/By_Unsplash.jpg" alt="Search bar with blue background" />
</div>
<div>
<a href="#">Learn more about Pseudo-classes</a>
</div>
</body>
</html>
En este ejemplo, hay dos imágenes y un enlace. Las imágenes se colocan en el mismo lugar, por lo que puede cambiarlas ocultando una y mostrando la otra.
CSS
body {
font-family: 'Inter', sans-serif;
}
.image-box {
position: relative;
width: 70%;
margin: 5em;
color: #fff;
}
.image-box img {
display: inline-block;
position: absolute;
left: 0;
width: 70%;
}
.image-box img.img-front:hover{
opacity:0;
cursor: pointer;
}
a {
position: absolute;
bottom: 2em;
left: 3em;
text-decoration: none;
color: #222;
display: inline-block;
font-size: 2.5em;
font-weight: 600;
border-bottom: 5px solid rgb(250, 0, 0);
}
a:hover {
color: rgb(250, 0, 0);
border-bottom: none;
}
Este primer ejemplo demuestra el efecto de pasar el cursor sobre el enlace. El CSS cambia su color y borde:
En este segundo ejemplo, puede ver el efecto de pasar el cursor sobre la imagen. Tiene su opacidad establecida en 0, lo que efectivamente hace que la imagen sea transparente.
¿Qué es un pseudoelemento?
Un pseudo-elemento se comporta de manera similar a una pseudo-clase. Recuerde que una pseudoclase se aplica a un elemento existente. Mientras tanto, un pseudoelemento actúa como si existiera un nuevo elemento HTML. Además, un pseudoelemento comienza con dos puntos dobles ( ::) . Veamos cómo funciona con un ejemplo.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Pseudo-class and Pseudo-element</title>
</head>
<body>
<header>
<div class="header-img">
<img src="By_Unsplash.jpg" alt="Coding on a laptop" />
</div>
</header>
</body>
</html>
Ahora, usaremos un pseudoelemento :: before para agregar el texto Learn More y un pseudoelemento :: after para agregar el texto Buy Now, usando solo CSS. También aplicaremos la propiedad de posición para colocar estos pseudoelementos en relación con el contenedor principal.
body {
font-family: 'Inter', sans-serif;
color: #666;
}
img {
width: 30em;
vertical-align: middle;
}
.header-img::before {
content: "Learn More";
color: #fff;
background-color: rgb(75, 159, 192);
padding: 0.3em 5em;
display: inline-block;
position: absolute;
top: 25px;
left: -70px;
transform: rotate(-45deg);
}
.header-img::after {
content: "Buy Now";
color: #fff;
background-color: rgb(212, 115, 91);
padding: 0.3em 5em;
display: inline-block;
position: absolute;
bottom: 25px;
right: -70px;
transform: rotate(-45deg);
}
header {
position: relative;
overflow: hidden;
font-weight: 600;
}
header,
section {
width: 30em;
}
El efecto final superpone etiquetas tipo "cinta" en la parte superior izquierda e inferior derecha de la imagen:
Ponga sus manos en pseudo-clases y pseudo-elementos
Las pseudoclases y pseudoelementos de CSS, cuando se utilizan correctamente, abren puertas a muchas posibilidades. Puede que te sientas abrumado al principio, pero practicar esta técnica es clave para mejorar tus habilidades de diseño web. La clave es siempre probar sus diseños a fondo, haciendo uso de funciones como DevTools de Google Chrome.
Esperamos que haya aprendido los conceptos básicos de las pseudoclases y los pseudoelementos. ¡Recuerda que el aprendizaje nunca se detiene! Por lo tanto, continúe explorando nuevos selectores de CSS e intente implementarlos y probarlos en su próximo proyecto.