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-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.
/* 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