Estados y partes: pseudo-clases y pseudo-elementos

Los selectores de las lecciones anteriores apuntan a elementos en reposo. Las pseudo-clases y los pseudo-elementos van más lejos: seleccionan un estado del elemento o una parte de él.

Pseudo-clases — un solo `:`

Una pseudo-clase selecciona un elemento según un estado que no está escrito en el HTML. Se escribe con un solo dos puntos después del selector.

Hay dos familias importantes, y la diferencia entre ellas determina si el efecto es validable o no:

Pseudo-clases de interacción (estado dinámico)

Dependen de lo que el usuario está haciendo en ese momento:

a:hover  { color: teal; }            /* cuando el mouse pasa encima */
input:focus { background-color: white; } /* cuando el input tiene el foco */
a:active { color: red; }             /* mientras se presiona */
a:visited { color: purple; }         /* enlace ya visitado */

Son fundamentales — las vas a usar todo el tiempo. Pero tienen una consecuencia directa: su efecto solo se ve interactuando. Para ver el :hover tenés que pasar el mouse; para ver el :focus tenés que hacer clic en el input.

Por qué el sandbox no puede validarlas: la validación ocurre sin interacción humana. getComputedStyle(el) lee el estado actual del elemento — en el momento de la corrección nadie está moviendo el mouse ni haciendo clic, así que :hover y :focus no están activos. El estilo resultante es el del estado en reposo. Es el mismo patrón que los links que no navegan (CAT-06): podés escribir el código correctamente, pero el validador verifica resultados, no intenciones de interacción.

Pseudo-clases estructurales (estado estático)

Dependen de la posición del elemento en el árbol, que es fija:

li:first-child  { font-weight: bold; }   /* el primer <li> de su padre */
li:last-child   { color: gray; }         /* el último <li> de su padre */
li:nth-child(2) { color: teal; }         /* el segundo <li> */
li:nth-child(odd) { background-color: white; } /* los impares (1°, 3°, 5°...) */

Estas no dependen de interacción — el primero siempre es el primero. Por eso su efecto sí es validable: el corrector puede leer el computed style de li:first-child sin que nadie mueva el mouse. Son la columna del ejercicio de esta lección.

Pseudo-elementos — dos `::` (dos dos puntos)

Un pseudo-elemento estila una parte del elemento o genera contenido que no está en el HTML. Se escribe con dos dos puntos :::

p::first-line     { font-weight: bold; }  /* solo la primera línea del párrafo */
input::placeholder { color: gray; }       /* el texto de marcador del input */
.precio::before   { content: "$"; }       /* inserta "$" ANTES del contenido */
.precio::after    { content: " AR"; }     /* inserta " AR" DESPUÉS del contenido */

Puntos finos:

:: es la sintaxis moderna — distingue pseudo-elementos (dos :) de pseudo-clases (uno :). Encontrarás :before con un solo : en código viejo; funciona por compatibilidad, pero la forma correcta para código nuevo es ::before.
::before y ::after necesitan content. Sin la propiedad content, no se genera nada — su valor por defecto computa a none. No es suficiente escribir ::before { color: red; }: hay que poner content: "" como mínimo para que el pseudo-elemento aparezca.

/* Correcto */
.precio::before { content: "$"; color: teal; }

/* No genera nada — falta content */
.precio::before { color: teal; }

Por qué el sandbox no puede validar pseudo-elementos: el motor lee el estilo con getComputedStyle(elemento), que lee el elemento host, no su ::before. Para leer el pseudo-elemento habría que pasar "::before" como segundo argumento — el motor actual no lo hace. El efecto de un ::before lo verificás visualmente en el preview.

Tabla de referencia rápida

Sintaxis	Tipo	Validable	Descripción
`:hover`	pseudo-clase interacción	No (dinámico)	mouse encima
`:focus`	pseudo-clase interacción	No (dinámico)	elemento con foco
`:first-child`	pseudo-clase estructural	Sí (estático)	primer hijo de su padre
`:last-child`	pseudo-clase estructural	Sí (estático)	último hijo de su padre
`:nth-child(n)`	pseudo-clase estructural	Sí (estático)	n-ésimo hijo
`::before`	pseudo-elemento	No (motor actual)	contenido antes del elemento
`::after`	pseudo-elemento	No (motor actual)	contenido después del elemento
`::first-line`	pseudo-elemento	No (motor actual)	primera línea del elemento
`::placeholder`	pseudo-elemento	No (motor actual)	texto de marcador del input

Tu turno: escribí las tres reglas con pseudo-clases estructurales y, si querés, descomentá el a:hover para probarlo pasando el mouse en el preview. Hacé clic en “Comprobar”.