Junior
¿Qué son las pseudoclases en CSS?
sobes.tech AI
Respuesta de la IA
Los pseudoclases en CSS son palabras clave que se añaden a los selectores para indicar un estado especial del elemento. Permiten aplicar estilos a los elementos en función de su interacción con el usuario, su posición en la estructura del documento u otras características que no pueden ser expresadas mediante selectores estándar.
Ejemplos de pseudoclases:
-
Estados del usuario:
:hover- elemento sobre el que se pasa el cursor del ratón.:active- elemento que se activa (por ejemplo, al pulsar un botón del ratón).:focus- elemento que está en foco de entrada (por ejemplo, un campo de texto).:visited- enlace que el usuario ya ha visitado.:link- enlace que el usuario aún no ha visitado.
-
Posición en la estructura:
:first-child- primer hijo de su padre.:last-child- último hijo de su padre.:nth-child(n)- n-ésimo hijo de su padre.:first-of-type- primer elemento de su tipo entre los hijos.:last-of-type- último elemento de su tipo entre los hijos.
-
Otros:
:empty- elemento que no contiene hijos ni texto.:not(selector)- elementos que no coinciden con el selector indicado.
Sintaxis:
selector:pseudo-clase {
property: value;
}
Ejemplo de uso:
/* Cambiar el color del texto al pasar el ratón sobre un párrafo */
p:hover {
color: blue;
}
/* Estilo para el primer elemento de una lista */
li:first-child {
font-weight: bold;
}
Las pseudoclases amplían las capacidades de los selectores, permitiendo crear interfaces más dinámicas e interactivas sin usar JavaScript para cambios simples en los estilos.