Pseudo-clases y Pseudo-elementos en CSS

Las pseudo-clases y pseudo-elementos son conceptos importantes en CSS que te permiten aplicar estilos a elementos de manera específica, basados en su estado o en partes del contenido que no están directamente accesibles a través de las reglas estándar de CSS.

Pseudo-clases

Las pseudo-clases permiten aplicar estilos a elementos en estados específicos o en condiciones particulares. Se definen precediendo el nombre del selector con dos puntos :.

Pseudo-clases Comunes:
- :hover: Aplica estilos cuando el usuario pasa el cursor sobre un elemento.

a:hover {
    color: red;
}

:active: Aplica estilos cuando un elemento está siendo activado por el usuario, por ejemplo, al hacer clic en un enlace.

a:active {
    color: blue;
}

:focus: Aplica estilos cuando un elemento recibe el enfoque, como un campo de formulario o un enlace.

input:focus {
    border-color: green;
}

:nth-child(n): Aplica estilos a un hijo específico dentro de un contenedor. n puede ser un número, palabra clave (e.g., odd, even), o una fórmula (e.g., 2n+1 para todos los elementos impares).

li:nth-child(2) {
    background-color: lightgray;
}

:first-child: Aplica estilos al primer hijo de un contenedor.

p:first-child {
    font-weight: bold;
}

:last-child: Aplica estilos al último hijo de un contenedor.

p:last-child {
    font-style: italic;
}

:not(selector): Aplica estilos a elementos que no coinciden con el selector especificado.

div:not(.highlight) {
    color: gray;
}

Pseudo-elementos

Los pseudo-elementos permiten aplicar estilos a partes específicas de un elemento o crear contenido adicional. Se definen precediendo el nombre del pseudo-elemento con dos puntos dobles ::.

Pseudo-elementos Comunes:
- ::before: Inserta contenido antes del contenido del elemento.

p::before {
    content: "Nota: ";
    font-weight: bold;
}

::after: Inserta contenido después del contenido del elemento.

p::after {
    content: " - Fin del párrafo";
    color: gray;
}

::first-line: Aplica estilos a la primera línea de un bloque de texto.

p::first-line {
    font-weight: bold;
}

::first-letter: Aplica estilos a la primera letra de un bloque de texto.

p::first-letter {
    font-size: 2em;
    color: red;
}

Ejemplo Completo

Aquí hay un ejemplo que muestra cómo usar pseudo-clases y pseudo-elementos en un documento HTML:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ejemplo de Pseudo-clases y Pseudo-elementos</title>
    <style>
        /* Pseudo-clases */
        a:hover {
            color: red;
        }
        
        input:focus {
            border-color: green;
        }

        li:nth-child(odd) {
            background-color: lightgray;
        }

        p:first-child {
            font-weight: bold;
        }

        /* Pseudo-elementos */
        p::before {
            content: "Nota: ";
            font-weight: bold;
        }

        p::after {
            content: " - Fin del párrafo";
            color: gray;
        }

        p::first-line {
            font-weight: bold;
        }

        p::first-letter {
            font-size: 2em;
            color: red;
        }
    </style>
</head>
<body>
    <a href="#">Enlace de ejemplo</a>
    <input type="text" placeholder="Enfócate en mí">
    <ul>
        <li>Elemento 1</li>
        <li>Elemento 2</li>
        <li>Elemento 3</li>
    </ul>
    <p>Este es un párrafo de ejemplo para mostrar pseudo-elementos y pseudo-clases.</p>
</body>
</html>

Pseudo-clases y Pseudo-elementos en CSS

Pseudo-clases

Pseudo-elementos

Ejemplo Completo

Dejá un comentario Cancelar respuesta