::selection, ::marker, ::placeholder y ::first-letter

Cierras la teoría del módulo con los pseudo-elementos especializados: cada uno apunta a una pieza concreta que el navegador genera — el texto seleccionado, la viñeta de la lista, el placeholder del input, la primera letra. Detalles pequeños; en conjunto, la diferencia entre un sitio genérico y uno con firma.

::selection: la firma escondida

::selection {
background: #6d28d9;
color: white;
}

Selecciona texto en cualquier sitio bien cuidado y verás su color de marca en vez del azul del sistema. Dos reglas: solo acepta color, background y text-shadow (el navegador ignora lo demás), y verifica el contraste del par — texto blanco sobre tu acento debe seguir siendo AA (módulo 4).

::marker: la viñeta por fin tuya

<ul class="lista-marca">
<li>Viñetas con el acento de la casa</li>
<li>Sin trucos de ::before con position</li>
</ul>
<ol class="lista-numerada">
<li>Números en negrita violeta</li>
<li>El contenido queda intacto</li>
</ol>

body { font-family: system-ui; padding: 24px; color: #1e293b; }
ul, ol { font-size: 15px; line-height: 1.7; }
.lista-marca { list-style-type: "\25B8  "; }
.lista-marca li::marker { color: #6d28d9; }
.lista-numerada li::marker { color: #6d28d9; font-weight: 800; }

Antes de ::marker, colorear una viñeta exigía list-style: none + un ::before posicionado (y romper la sangría nativa). Ahora es una regla. Acepta color, tipografía y content — suficiente para el 99% de los casos.

::placeholder: el detalle de contraste

Dos recordatorios del módulo 2 ahora con su herramienta: el placeholder no reemplaza al label, y su gris por defecto suele fallar el contraste — esta regla lo corrige. El opacity: 1 neutraliza la opacidad que Firefox aplica por su cuenta.

::first-letter: el drop cap editorial

<article class="editorial">
<p>Desde los manuscritos medievales, la primera letra grande invita a entrar al texto. En CSS es un pseudo-elemento — y tu periódico está a una regla de verse como The New Yorker.</p>
</article>

body { font-family: Georgia, serif; padding: 24px; }
.editorial p { font-size: 16px; line-height: 1.7; color: #334155; max-width: 55ch; margin: 0; }
.editorial p::first-letter { font-size: 3.2em; font-weight: 700; color: #6d28d9; float: left; line-height: 0.8; padding-right: 8px; padding-top: 4px; }

Las piezas: tamaño en em (escala con el párrafo), float: left (¡el único uso moderno respetable de float: el texto envuelve la letra!) y line-height corto para que no empuje. Su hermano ::first-line estiliza la primera línea (clásico: versalitas de apertura) — se recalcula solo al redimensionar.

Mini-reto

La pasada de sastrería completa a tu periódico: ::selection con tu acento, ::marker violeta en las listas, ::placeholder con contraste corregido y el drop cap en el primer párrafo de la noticia principal. Cuatro reglas, identidad en los detalles.

Qué sigue

Teoría del módulo completa: estados, posición, combinadores, :has(), fantasmas, arte y especializados. Vienen los DOS retos: dibujar un logo solo con CSS, y el gran final — un checklist interactivo completo sin una línea de JavaScript.