Pseudo-clases y Pseudo-elementos

Las pseudo-clases seleccionan elementos según su estado o posición. :hover aplica cuando el cursor está encima, :focus cuando está seleccionado (teclado o clic), :active durante el clic, :visited a enlaces ya visitados. :first-child, :last-child y :nth-child(n) seleccionan por posición en el DOM, eliminando la necesidad de clases extra.

Los pseudo-elementos crean partes virtuales de un elemento. ::before y ::after insertan contenido antes o después del elemento real sin tocar el HTML (ideal para decoraciones, íconos o contadores). ::placeholder estiliza el texto placeholder de inputs. ::selection cambia los colores cuando el usuario selecciona texto con el cursor.

/* PSEUDO-CLASES */
a:hover   { color: #00E5A0; }     /* cuando el ratón está encima */
a:active  { opacity: 0.7; }       /* mientras se hace clic */
a:visited { color: purple; }      /* enlace ya visitado */
input:focus { outline: 2px solid #00E5A0; } /* campo activo */
input:disabled { opacity: 0.5; }

/* Estructurales */
li:first-child  { font-weight: bold; }   /* primer hijo */
li:last-child   { border: none; }        /* último hijo */
li:nth-child(2) { color: red; }          /* segundo hijo */
li:nth-child(odd)  { background: #f0f0f0; } /* impares */
li:nth-child(even) { background: #fff; }    /* pares */

/* PSEUDO-ELEMENTOS */
.titulo::before {
  content: "🎯 "; /* agrega contenido antes */
}

.parrafo::after {
  content: " ←";
}

/* Primer párrafo diferente */
p::first-letter {
  font-size: 2em;
  float: left;
  margin-right: 4px;
}

/* Texto seleccionado */
::selection {
  background: #00E5A0;
  color: #0A0F1E;
}