40-pseudo-clases en css

---

Pseudo-clases en CSS

• Pseudo-clases en CSS
• Sintaxis de Pseudo-clases
• Pseudo-clases de Enlaces (Anchor)
• Pseudo-clases y Clases HTML
• Efecto Hover en <div>
• Tooltip Simple con Hover
• Pseudo-clase :first-child
• Aplicar a primer <p> (Match first <p>)
• Aplicar a primer <i> en <p>
• Todos los <i> en primer <p> hijo
• Pseudo-clase :lang

---

Pseudo-clases en CSS

Las pseudo-clases en CSS son una forma de definir el estilo de un elemento basado en su estado o en su posición dentro de la estructura del documento. Se utilizan para seleccionar y aplicar estilos a elementos en situaciones específicas, como cuando el usuario interactúa con ellos o cuando un elemento se encuentra en un estado determinado.

Algunas de las pseudo-clases más comunes son:

• :hover - Se aplica cuando el usuario pasa el ratón sobre el elemento.
• :active - Se aplica cuando el elemento está siendo activado, por ejemplo, un enlace que se está haciendo clic.
• :focus - Se aplica cuando el elemento tiene el foco, como cuando un campo de texto está seleccionado.
• :nth-child() - Se aplica a los elementos basados en su posición dentro de su padre.

Volver al índice de los temas

---

            
/* Ejemplo de Pseudo-clases en CSS */
a:hover {
    color: red; /* Cambia el color del enlace cuando el ratón está sobre él */
}

input:focus {
    border-color: blue; /* Cambia el borde del campo de texto cuando tiene el foco */
}

li:nth-child(odd) {
    background-color: #f0f0f0; /* Aplica un fondo diferente a los elementos impares */
}
            
        

Ejemplos Visuales

El siguiente ejemplo muestra cómo funciona la pseudo-clase :hover cuando el usuario pasa el ratón sobre un enlace:

Hover sobre este enlace

Este ejemplo aplica la pseudo-clase :focus a un campo de entrada:

Y finalmente, este ejemplo utiliza :nth-child() para cambiar el fondo de los elementos impares en una lista:

• Elemento 1
• Elemento 2
• Elemento 3
• Elemento 4

---

...

Sintaxis de Pseudo-clases

La sintaxis de las pseudo-clases en CSS se usa para seleccionar un estado específico de un elemento. La forma básica de una pseudo-clase es:

:pseudo-clase

Donde pseudo-clase es el nombre de la pseudo-clase que queremos aplicar. Las pseudo-clases también pueden aceptar parámetros dentro de paréntesis, como se muestra en estos ejemplos:

• :nth-child(n) - Selecciona los elementos que son el n-ésimo hijo de su padre.
• :hover - Se activa cuando el ratón pasa sobre el elemento.
• :first-child - Se aplica al primer hijo de un elemento.
• :last-child - Se aplica al último hijo de un elemento.

Volver al índice de los temas

---

            
/* Ejemplo de Sintaxis de Pseudo-clases */
a:hover {
    color: red; /* Cambia el color del enlace cuando el ratón está sobre él */
}

p:first-child {
    font-weight: bold; /* Aplica negrita al primer párrafo */
}

div:nth-child(2) {
    background-color: #f0f0f0; /* Aplica un fondo a todos los elementos div que son el segundo hijo */
}
            
        

Ejemplos Visuales

Este ejemplo muestra cómo funciona la pseudo-clase :hover cuando el usuario pasa el ratón sobre un enlace:

Hover sobre este enlace

En este caso, la pseudo-clase :first-child resalta el primer párrafo:

Primer párrafo con estilo: Este párrafo es el primero y está en negrita.

Finalmente, el siguiente código muestra cómo la pseudo-clase :nth-child afecta al segundo <div> en una lista de elementos:

Primer div

Segundo div (cambia de fondo)

Tercer div

---

Pseudo-clases de Enlaces (Anchor)

Las pseudo-clases de enlaces en CSS permiten aplicar estilos a los enlaces en diferentes estados. Existen varias pseudo-clases comunes para enlaces:

• :link — Aplica a un enlace no visitado.
• :visited — Aplica a un enlace que ya ha sido visitado.
• :hover — Aplica cuando el usuario pasa el ratón sobre el enlace.
• :active — Aplica mientras el enlace está siendo activado (cuando se hace clic en él).

Estas pseudo-clases son muy útiles para dar interactividad y estilo a los enlaces en una página web.

Volver al índice de los temas

                
                

                Visita nuestro sitio web
            

---

Ejemplos Visuales

En este ejemplo visual, los enlaces cambiarán de color dependiendo de su estado:

• Enlace no visitado se mostrará en azul.
• Enlace visitado se mostrará en morado.
• Al pasar el ratón el enlace cambiará a rojo (hover).
• Cuando se haga clic el enlace se mostrará en verde (active).

Visita nuestro sitio web

---

Pseudo-clases y Clases HTML

Las pseudo-clases en CSS pueden usarse junto con las clases HTML para aplicar estilos a los elementos según su estado o posición en el DOM. Por ejemplo, puedes aplicar un estilo a los elementos que son el primer hijo de un contenedor o a aquellos que están en un estado de hover.

Además de las pseudo-clases, las clases HTML permiten organizar el estilo de los elementos y hacer selecciones más específicas. Combinando estas herramientas, puedes crear estilos más dinámicos y fáciles de mantener.

Volver al índice de los temas

            
            <div class="contenedor">
                <p class="primer-hijo">Este es el primer hijo</p>
                <p class="segundo-hijo">Este es el segundo hijo</p>
                <a href="#" class="enlace">Enlace</a>
            </div>

            <style>
                /* Pseudo-clase para el primer hijo */
                .contenedor > .primer-hijo {
                    color: blue;
                }

                /* Pseudo-clase para el estado hover en el enlace */
                .enlace:hover {
                    color: red;
                }

                /* Pseudo-clase para el estado visitado en el enlace */
                .enlace:visited {
                    color: purple;
                }
            </style>
        

Ejemplos Visuales

Este es el primer hijo

Este es el segundo hijo

Enlace

---

Efecto Hover en <div>

En este tema, aprenderemos a aplicar efectos interactivos a los elementos <div> cuando el usuario pasa el ratón sobre ellos. Esto se logra usando la pseudo-clase :hover en CSS, que cambia el estilo del elemento mientras el ratón está encima.

Por ejemplo, se puede cambiar el color de fondo de un <div> cuando el usuario coloca el cursor encima de él. Esto se utiliza comúnmente en botones, cajas de información, y otros elementos interactivos de la página.

Volver al índice de los temas

            
            <div class="hover-box">
                Pasa el ratón sobre mí
            </div>

            <style>
                .hover-box {
                    width: 300px;
                    height: 100px;
                    background-color: lightblue;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    transition: background-color 0.3s, color 0.3s;
                    text-align: center;
                    font-size: 1.5rem;
                }

                .hover-box:hover {
                    background-color: lightcoral;
                    color: white;
                }
            </style>
        

Ejemplos Visuales

Pasa el ratón sobre mí

---

Tooltip Simple con Hover

En este tema aprenderemos a crear un tooltip (una pequeña caja de texto que aparece cuando el usuario pasa el ratón sobre un elemento). Este tipo de interacciones es muy útil para mostrar información adicional o descripciones de manera interactiva sin sobrecargar la interfaz visual.

El tooltip se puede implementar fácilmente en HTML y CSS usando la pseudo-clase :hover para mostrarlo cuando el ratón pasa sobre el elemento objetivo.

Por ejemplo, vamos a crear un tooltip que aparece cuando el usuario pasa el ratón sobre un enlace o botón.

Volver al índice de los temas

            
            <button class="btn btn-primary" data-bs-toggle="tooltip" data-bs-placement="top" title="Este es un tooltip de ejemplo">
                Pasa el ratón sobre mí
            </button>

            <script>
                var tooltipTriggerList = Array.from(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
                tooltipTriggerList.forEach(function (tooltipTriggerEl) {
                    new bootstrap.Tooltip(tooltipTriggerEl)
                })
            </script>
        

Ejemplos Visuales

---

Pseudo-clase :first-child

La pseudo-clase :first-child se utiliza para seleccionar el primer hijo de un contenedor. Es útil cuando queremos aplicar un estilo específico al primer elemento de una lista o un grupo de elementos, sin necesidad de agregar una clase especial a ese elemento. En el siguiente ejemplo, aplicaremos un color de fondo diferente al primer elemento de una lista <ul> utilizando la pseudo-clase :first-child.

Volver al índice de los temas

            <style>
                /* Estilo para el primer hijo de la lista */
                ul li:first-child {
                    background-color: lightblue;
                }
            </style>

            <ul>
                <li>Primer elemento (cambia de color)</li>
                <li>Segundo elemento</li>
                <li>Tercer elemento</li>
            </ul>
        

Ejemplo Visual

• Primer elemento (cambia de color)
• Segundo elemento
• Tercer elemento

---

Aplicar a primer <p> (Match first <p>)

La pseudo-clase :first-of-type se utiliza para seleccionar el primer elemento de un tipo dado dentro de su contenedor. Por ejemplo, podemos usarla para aplicar estilos solo al primer <p> de un grupo de párrafos sin afectar a los demás. En este caso, vamos a cambiar el color de fondo del primer párrafo utilizando esta pseudo-clase.

Volver al índice de los temas

            <style>
                /* Estilo para el primer párrafo */
                p:first-of-type {
                    background-color: lightgreen;
                }
            </style>

            <p>Primer párrafo (cambia de color)</p>
            <p>Segundo párrafo</p>
            <p>Tercer párrafo</p>
        

Ejemplo Visual

Primer párrafo (cambia de color)

Segundo párrafo

Tercer párrafo

---

Aplicar a primer <i> en <p>

La pseudo-clase :first-of-type nos permite seleccionar el primer elemento de un tipo dentro de un contenedor. En este caso, vamos a aplicar la pseudo-clase a un <i> dentro de un <p>, asegurándonos de que solo se seleccione el primer <i> en cada párrafo.

Por ejemplo, si hay varios elementos <i> dentro de un párrafo, solo el primer <i> será estilizado con los estilos definidos.

Volver al índice de los temas

                <p>
                    <i>Primer elemento</i> dentro de un párrafo.
                    <i>Segundo elemento</i> dentro de un párrafo.
                </p>
                <style>
                    p i:first-of-type {
                        color: blue;
                    }
                </style>
            

Ejemplo Visual

Primer elemento dentro de un párrafo. Segundo elemento dentro de un párrafo.

Otro primer elemento dentro de un párrafo. Otro segundo elemento dentro de un párrafo.

Todos los <i> en primer <p> hijo

La pseudo-clase :first-of-type permite seleccionar el primer hijo de un elemento de un tipo específico. En este caso, si aplicamos la pseudo-clase :first-of-type sobre el primer <p>, podemos modificar todos los elementos <i> dentro de ese primer párrafo sin afectar los de los demás párrafos.

En este ejemplo, los elementos <i> dentro del primer <p> hijo se estilizan en color rojo, pero los elementos <i> en otros párrafos no se ven afectados.

Volver al índice de los temas

            <p>
                <i>Primer elemento i</i> en el primer párrafo<br>
                <i>Segundo elemento i</i> en el primer párrafo<br>
                <i>Tercer elemento i</i> en el primer párrafo
            </p>
        

Ejemplo Visual

Primer elemento i en el primer párrafo
Segundo elemento i en el primer párrafo
Tercer elemento i en el primer párrafo

Este no se ve afectado porque no está en el primer <p> hijo.

---

Pseudo-clase :lang

La pseudo-clase :lang se utiliza para seleccionar elementos en función de su atributo lang, el cual indica el idioma del contenido. Esto es útil cuando queremos aplicar diferentes estilos dependiendo del idioma del texto. Por ejemplo, podemos estilizar los párrafos que están en inglés de una manera diferente a los que están en español o en francés.

En el siguiente ejemplo, usaremos la pseudo-clase :lang para aplicar colores distintos a los párrafos en inglés, español y francés, según el valor del atributo lang.

Volver al índice de los temas

            <p lang="en">Este es un párrafo en inglés</p>
            <p lang="es">Este es un párrafo en español</p>
            <p lang="fr">Ce paragraphe est en français</p>

            <style>
                p[lang="en"] {
                    color: blue;
                }
                p[lang="es"] {
                    color: green;
                }
                p[lang="fr"] {
                    color: purple;
                }
            </style>
        

Ejemplo Visual

This is a paragraph in English

Este es un párrafo en español

Ce paragraphe est en français

Ir al índice

---

---