Las pseudo clases más utilizadas en CSS

Última actualización: 01 - 11 - 2023

¿Qué es una pseudo clase en CSS?

Las pseudoclases son estados que modifican el comportamiento o los estilos de un elemento HTML.

Cómo usar una pseudo clase en CSS

Primero debemos tener creada la clase con su respectivo selector, las pseudo clases no van a realizar su trabajo si la clase que la va a contener no existe.

.clase-asignada{
/* Tus estilos */
}

Ahora veamos cómo se declara una pseudo clase. 👇

Sintaxis de una pseudo clase

Para escribir una pseudo clase en nuestras reglas CSS debemos seguir la siguiente fórmula:

.clase-asignada:pseudoclase{
/* Estilos que se van a aplicar según su pseudo clase */
}

/* Toma en cuenta que el selector puede ser de etiqueta o un ID también */

📢¡NOTA IMPORTANTE!

Para que la pseudo clase tenga efecto no debe haber separación entres los dos puntos ( : ) y la clase.

¿Para qué sirven las pseudo clases? 🤷‍♂️

Estas nos pueden ayudar a resaltar o modificar comportamientos visuales de las etiquetas HTML, ya sea para inhabilitar algún input de un formulario, hacer efectos increibles con el movimiento del mouse sobre algún elemento o hacerle saber a un usuario que ya le ha dado click a un enlace. No siempre es necesario usar pseudo clases, va a depender de la creatividad o de la necesidad de la vista renderizada en la pantalla.

Lista de las pseudo clases más utilizadas en css

Pseudoclase hover

El hover es el más usado para generar efectos con el mouse. Su función es bastante simple y determina el comportamiento de un elemento cuando el puntero pasa sobre el. Es muy común utilizarlos en botones para que cambien de color, en enlaces para cambiar el estilo del puntero o mostrar información emergente.

.clase-random-1:hover{
/* Estilos que se van a aplicar cuando pasamos el mouse sobre el elemento */
}

/* Ejemplo de efecto hover */

.btn-post-example{
display:block;
background-color:#9CDCFE;
color:#000;
border-radius:7px;
padding:1rem;
text-align:center;
text-decoration:none;
transition:all 300ms;
}

.btn-post-example:hover{
background-color:#2b6df1;
color:#fff;
}

/* Resultado */

Hover me

Pseudoclase active

Active es muy utilizado para darle al usuario la sensación de seguridad de haber dado click a un elemento. Agrega modernidad a los estilos de un sitio web y es bastante usado en botones; Apple es un buen ejemplo de ello.

.clase-random-2:hover{
/* Estilos que se van a aplicar mientras mantengamos presionado el click en el elemento */
}

/* Ejemplo de efecto active */

.btn-post-example-2{
display:block;
background-color:#9CDCFE;
color:#000;
border-radius:7px;
padding:1rem;
text-align:center;
text-decoration:none;
transition:all 300ms;
}

.btn-post-example-2:active{
background-color:#2b6df1;
color:#fff;
}

/* Resultado */

Active me

Pseudoclase link

Link es utilizado para los enlaces en los cuales el usuario aún no ha dado click. El navegador utiliza unos estilos por defecto pero con CSS tenemos la capacidad de modificar los estilos y el comportamiento de dichos enlaces.

Pseudoclase visited

Esta pseudoclase se va a aplicar luego de que el usuario haya dado click a un enlace. Es una buena forma de indicarle por donde ha sido su paso a través de una página web. Veamos un ejemplo con ambas pseudoclases.

.clase-random-3:link{
/* Estilos que se van a aplicar mientras el usuario no le haya dado click al enlace */
}

.clase-random-3:visited{
/* Estilos que se van a aplicar luego de que el usuario le haya dado click al enlace */
}

/* Ejemplo */

.link-post-example:link{
background-color:#fff;
color:#2b6df1;
padding:2rem;
text-align:center;
text-decoration:none;
}

.link-post-example:visited{
background-color:#738080;
color:#551A8B;
}

/* Resultado */

Link Example

Pseudoclase first-child

First-child va a ser aplicado al primer elemento que se encuentre dentro de un grupo de elementos hermanos; como las etiquetas li agrupadas en un ul o los párrafos que se encuentren dentro de un div.

<div class="p-container">
<p>Párrafo 1</p> <-- Elemento que va a ser afectado
<p>Párrafo 2</p>
<p>Párrafo 3</p>
<p>Párrafo 4</p>
</div>
.p-container p:first-child{
font-size:22px;
color:blue;
}

Resultado. 👇

Párrafo 1

Párrafo 2

Párrafo 3

Párrafo 4

Pseudoclase nth-child

Nth-child permite elegir cual de los elementos hermanos queremos afectar siempre y cuando se encuentren dentro de otro elemento como en el ejemplo anterior. Vamos a retomarlo.

<divclass="p-container">
<p>Párrafo 1</p>
<p>Párrafo 2</p>
<p>Párrafo 3</p>
<p>Párrafo 4</p>
</div>
/* El número entre paréntesis va a indicar cual elemento va a ser afectado */

.p-container p:nth-child(3){
font-size:22px;
color:blue;
}

Resultado. 👇

Párrafo 1

Párrafo 2

Párrafo 3

Párrafo 4

Pseudoclase root

La pseudoclase root es muy usada para cuando queremos utilizar variables en CSS en vez de valores para añadir estilos a nuestro documento HTML. No hace falta crear una clase o id para usarla ya que root hace referencia al documento HTML por sí sola.

:root{
/* Variables que quieras crear */
--colorPrincipal:#14758B;
--colorSecundario:#75D691;
}

¿Cuáles pseudo clases usas más? ¿Sabías cómo funcionaban estas? Hay muchas más pseudo clases por ver aunque no todas son utilizadas en un solo proyecto. Si crees que en este artículo faltó una que te parezca esencial hazmelo saber a través de mi cuenta de Instagram.

Hasta que implemente una sección de comentarios. 😂