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