Pseudoclases y Pseudoelementos

:hover · :focus · :active · :visited Estado

Las pseudoclases de interacción más usadas. Definen estilos según el estado de interacción del usuario.

:link / :visited

:nth-child · :first · :last · :not() Estructural

Seleccionan elementos por su posición en el DOM.

ítem 1

ítem 2

ítem 3

ítem 4

ítem 5

ítem 6

::before · ::after · ::placeholder · ::selection Pseudoelemento

Crean elementos virtuales o seleccionan partes del contenido. ::before/::after requieren content.

Texto con ::before y ::after

La primera letra se estiliza con ::first-letter aplicado a este párrafo de ejemplo.

Selecciona este texto para ver ::selection con color personalizado.

:is() · :where() · :has() Moderno

:is() agrupa selectores (alta especificidad), :where() igual pero sin especificidad, :has() es el selector "padre".

/* :is() agrupa */
:is(h1, h2, h3) { color: blue; }

/* :where() sin especificidad */
:where(section, article) p { ... }

/* :has() — selector "padre" */
div:has(img) { border: 2px solid; }
form:has(:invalid) { outline: red; }

:focus-within · :checked · :disabled · :valid Formulario

Pseudoclases de estado en formularios para estilos condicionales de validación e interacción.

:focus-visible Accesibilidad

Aplica el estilo de foco solo cuando el usuario navega con teclado (no con ratón). Soluciona el dilema de quitar el outline sin romper la accesibilidad.

/* ✓ La solución correcta */
button:focus         { outline: none; }
button:focus-visible { outline: 2px solid #3d7ef5;
                       outline-offset: 2px; }

/* ✗ Nunca hacer esto */
*:focus { outline: none; } /* rompe accesibilidad */

:placeholder-shown · :empty · :not() Estado

Pseudoclases para detectar si un input muestra su placeholder (vacío), si un elemento no tiene hijos, y para negar selectores.

vacío

/* Mientras el input está vacío */
input:placeholder-shown { border-color: #d1d5db; }
input:not(:placeholder-shown) { border-color: #3d7ef5; }

/* Elemento sin hijos */
.list:empty::before { content: "Sin elementos"; }

/* Negar múltiples */
:not(h1, h2, h3) { font-size: .9rem; }

:nth-of-type · :first-of-type · :only-child Estructural

Variantes de :nth-child que filtran por tipo de elemento. :nth-of-type(n) cuenta solo entre hermanos del mismo tag.

/* Solo el primer  aunque haya divs antes */
p:first-of-type { font-size: 1.1em; }

/* Cada 2do párrafo */
p:nth-of-type(2n) { background: #f8fafc; }

/* Un único hijo */
li:only-child { list-style: none; }

/* Diferencia clave */
/* :nth-child cuenta TODOS los hermanos (cualquier tag) */
/* :nth-of-type cuenta solo los del mismo tipo */

Tabla de pseudoelementos Referencia

Guía completa de todos los pseudoelementos CSS con su caso de uso.

::beforeContenido generado antes del elemento ::afterContenido generado después del elemento ::first-letterPrimera letra del primer bloque ::first-linePrimera línea del texto ::selectionTexto seleccionado por el usuario ::placeholderTexto placeholder de inputs ::markerViñeta o número de lista ::backdropFondo de dialog/fullscreen ::cueSubtítulos WebVTT en video ::part()Parte expuesta de un Web Component ::slotted()Elemento en un slot del Shadow DOM ::view-transitionTransición de vistas (2024)

CSS Pseudoclases & Pseudoelementos