Pseudoclases en CSS

¿Qué son las Pseudoclases en CSS?

Las pseudoclases en CSS se utilizan para definir un estado especial de un elemento. Estas permiten aplicar estilos a un elemento cuando se encuentra en un estado particular, como cuando el usuario pasa el ratón sobre él, cuando es el primer hijo de su padre, cuando un enlace ha sido visitado, entre otros.

Ejemplos Comunes de Pseudoclases

• :hover: Se aplica cuando el usuario pasa el ratón sobre un elemento.
• :focus: Se aplica cuando un elemento (como un campo de formulario) gana foco.
• :active: Se aplica mientras un elemento está siendo activado, como un enlace que está siendo clicado.
• :visited: Se aplica a los enlaces que han sido visitados.
• :nth-child(): Se aplica a un hijo específico basado en su posición dentro de su padre.
• :first-child: Se aplica al primer hijo de un elemento padre.
• :last-child: Se aplica al último hijo de un elemento padre.
• :not(): Se aplica a todos los elementos que no coinciden con un selector específico.

1. Pseudoclase :hover

La pseudoclase :hover se utiliza para cambiar el estilo de un elemento cuando el usuario pasa el ratón sobre él.

/* Ejemplo de uso */
a:hover {
    color: red;
}

2. Pseudoclase :focus

La pseudoclase :focus se aplica a un elemento que ha recibido el foco, como un campo de formulario que el usuario está editando.

/* Ejemplo de uso */
input:focus {
    border-color: blue;
}

3. Pseudoclase :nth-child()

La pseudoclase :nth-child() selecciona un hijo específico basado en su posición dentro de su elemento padre. Acepta números, palabras clave como odd (impar) y even (par), o una fórmula.

/* Ejemplo de uso */
ul li:nth-child(2) {
    background-color: lightgray;
}

/* Todos los elementos impares */
ul li:nth-child(odd) {
    background-color: lightblue;
}

4. Pseudoclase :first-child y :last-child

La pseudoclase :first-child selecciona el primer hijo de un elemento padre, mientras que :last-child selecciona el último hijo.

/* Ejemplo de uso */
p:first-child {
    font-weight: bold;
}

p:last-child {
    color: blue;
}

5. Pseudoclase :not()

La pseudoclase :not() selecciona todos los elementos que no coinciden con un selector específico.

/* Ejemplo de uso */
button:not(.primary) {
    background-color: gray;
}

Combinación de Pseudoclases

Las pseudoclases pueden combinarse para seleccionar elementos en estados específicos. Por ejemplo, puedes seleccionar un enlace que ha sido visitado y sobre el cual el usuario está pasando el ratón:

a:visited:hover {
    color: purple;
}

Ejemplos Prácticos

A continuación se muestran algunos ejemplos prácticos de cómo se pueden aplicar pseudoclases para mejorar la interactividad y el diseño de una página web:

/* Cambia el color de fondo del primer elemento de una lista cuando se pasa el ratón sobre él */
ul li:first-child:hover {
    background-color: yellow;
}

/* Aplica estilos específicos al tercer hijo de un contenedor */
.container div:nth-child(3) {
    border: 2px solid green;
}

/* Cambia el color de un botón que no tiene la clase "primary" */
button:not(.primary) {
    background-color: gray;
}

Consejos para Usar Pseudoclases en CSS

• Interactividad: Usa pseudoclases como :hover y :focus para mejorar la experiencia del usuario al interactuar con tu página.
• Optimización: Combina pseudoclases para crear reglas más específicas y evitar la necesidad de añadir clases adicionales en tu HTML.
• Compatibilidad: Asegúrate de que las pseudoclases que usas sean compatibles con los navegadores que tu audiencia utiliza.