Describe las pseudoclases y pseudoelementos en CSS…

Los pseudoclases y pseudoelementos amplían las capacidades de los selectores en CSS, permitiendo aplicar estilos a los elementos en función de su estado, posición u otras características que no pueden ser expresadas con selectores simples.

Pseudoclases

Las pseudoclases comienzan con dos puntos (:). Se utilizan para estilizar un elemento en un estado determinado.

Principales pseudoclases:

:hover - estiliza el elemento al pasar el cursor sobre él.
:active - estiliza el elemento durante el clic (activación).
:focus - estiliza el elemento que actualmente tiene el foco (por ejemplo, después de hacer clic en un enlace o en un campo de entrada).
:visited - estiliza los enlaces visitados.
:link - estiliza enlaces no visitados.
:first-child - estiliza el primer hijo de su elemento padre.
:last-child - estiliza el último hijo de su elemento padre.
:nth-child(n) - estiliza el n-ésimo hijo de su elemento padre. n puede ser un número, una palabra clave (even, odd) o una expresión (2n+1).
:nth-last-child(n) - estiliza el n-ésimo hijo desde el final.
:not(selector) - estiliza los elementos que no coinciden con el selector especificado.

/* Ejemplo de uso de pseudoclases */
a:hover {
  color: blue; /* Cambio de color del enlace al pasar el cursor */
}

input:focus {
  border-color: green; /* Cambio del borde del campo de entrada al tener foco */
}

li:first-child {
  font-weight: bold; /* Estiliza el primer elemento de la lista */
}

Pseudoelementos

Los pseudoelementos comienzan con doble dos puntos (::). Se utilizan para estilizar una parte específica del elemento o para insertar contenido generado antes o después del contenido del elemento.

Principales pseudoelementos:

::before - inserta contenido generado antes del contenido del elemento. Frecuentemente se usa con la propiedad content.
::after - inserta contenido generado después del contenido del elemento. También requiere la propiedad content.
::first-letter - estiliza la primera letra del bloque de texto.
::first-line - estiliza la primera línea del bloque de texto.
::selection - estiliza la parte del elemento que ha sido seleccionada por el usuario.

/* Ejemplo de uso de pseudoelementos */
p::first-letter {
  font-size: 2em; /* Aumenta la primera letra del párrafo */
  font-weight: bold;
}

h2::after {
  content: " ---"; /* Añade texto después del encabezado */
  color: gray;
}

mark::selection {
  background-color: yellow; /* Cambia el fondo del texto seleccionado */
  color: black;
}

Históricamente, las pseudoclases usaban un solo dos puntos (:) para compatibilidad con CSS2.1, mientras que los pseudoelementos en CSS3 comenzaron a usar doble dos puntos (::) para una mejor diferenciación. Se recomienda usar doble dos puntos para pseudoelementos en el código moderno.

Tabla comparativa:

Característica	Pseudoclase	Pseudoelemento
Sintaxis	`:selector`	`::selector`
Propósito	Estado del elemento	Parte del elemento o contenido generado
Ejemplos	`:hover`, `:focus`, `:first-child`	`::before`, `::after`, `::first-letter`

Describe las pseudoclases y pseudoelementos en CSS.