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.
/* 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:
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-claseDonde 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.
/* 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:
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:
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.
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).
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.
<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>
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.
<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
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.
<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.
<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.
<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.
<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.
<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.
<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
0 Comentarios
Si desea contactar comigo, lo puede hacer atravez deste formulario gracias