Pseudo-clases: estado y posición

Una pseudo-clase (:hover, :checked…) empieza con : y filtra al elemento según algo que el HTML no dice. Las de estado cambian con lo que hace la persona:

1. Puntero:hover · :active:hover con el puntero encima, :active mientras se presiona.
2. Foco:focus · :focus-visible:focus cada vez que el elemento tiene el foco; :focus-visible solo cuando el navegador decide mostrarlo, como al usar el teclado. Para los anillos de foco, usá :focus-visible.
3. Formularios:checked · :disabled · :user-invalid:checked y :disabled en formularios, y :user-invalid para marcar un campo inválido recién después de que la persona lo tocó.

Las de estructura miran la posición entre hermanos. :first-child y :last-child eligen los extremos, y :nth-child(an+b) prueba n = 0, 1, 2…: 2n+1 elige 1, 3, 5 (igual que odd) y -n+3 elige los tres primeros. :not() excluye, :is() y :where() agrupan, y :has() elige al elemento por lo que contiene: el famoso selector de padre.

Prendé y apagá las reglas, tildá los ingredientes que ya tenés y pasá el puntero o el Tab por la lista. Las marcas naranjas nombran el selector que está actuando en cada fila, y el CSS de abajo es el que está aplicado.

li:has(:checked) · li::marker

4 de 5 reglas activas

Bowl de garbanzos y palta

20 minutos · 2 porciones

Ingredientes

1 de 5 en la mesada

::before

• Palta madura:nth-child(odd):hover:focus-visible
• Garbanzos cocidos:has(:checked):hover:focus-visible
• Tomates cherry:nth-child(odd):hover:focus-visible
• Repollo morado:hover:focus-visible
• Batata asada:nth-child(odd):hover:focus-visible

:nth-child(odd) pinta las impares

:hover y :focus-visible resaltan

:has(input:checked) tacha

::before numera con counter()

::marker muestra la viñeta

ingredientes.css

.ingredientes li:nth-child(odd) {
  background-color: color-mix(in oklab, currentColor 6%, transparent);
}

.ingredientes li:hover,
.ingredientes li:has(:focus-visible) {
  background-color: color-mix(in oklab, currentColor 12%, transparent);
}

.ingredientes label:has(input:checked) {
  text-decoration: line-through;
  opacity: 0.6;
}

.ingredientes {
  counter-reset: ingrediente;
}

.ingredientes li {
  counter-increment: ingrediente;
}

.ingredientes li::before {
  content: counter(ingrediente) ".";
  margin-inline-end: 0.5rem;
}

ingredientes.html

<ul class="[counter-reset:ingrediente]">
  <li class="odd:bg-current/6 hover:bg-current/12 has-focus-visible:bg-current/12 [counter-increment:ingrediente] before:me-2 before:content-[counter(ingrediente)'.']">
    <label class="has-checked:line-through has-checked:opacity-60">
      <input type="checkbox" /> Palta madura
    </label>
  </li>
  <li class="odd:bg-current/6 hover:bg-current/12 has-focus-visible:bg-current/12 [counter-increment:ingrediente] before:me-2 before:content-[counter(ingrediente)'.']">
    <label class="has-checked:line-through has-checked:opacity-60">
      <input type="checkbox" checked /> Garbanzos cocidos
    </label>
  </li>
  <li class="odd:bg-current/6 hover:bg-current/12 has-focus-visible:bg-current/12 [counter-increment:ingrediente] before:me-2 before:content-[counter(ingrediente)'.']">
    <label class="has-checked:line-through has-checked:opacity-60">
      <input type="checkbox" /> Tomates cherry
    </label>
  </li>
  <li class="odd:bg-current/6 hover:bg-current/12 has-focus-visible:bg-current/12 [counter-increment:ingrediente] before:me-2 before:content-[counter(ingrediente)'.']">
    <label class="has-checked:line-through has-checked:opacity-60">
      <input type="checkbox" /> Repollo morado
    </label>
  </li>
  <li class="odd:bg-current/6 hover:bg-current/12 has-focus-visible:bg-current/12 [counter-increment:ingrediente] before:me-2 before:content-[counter(ingrediente)'.']">
    <label class="has-checked:line-through has-checked:opacity-60">
      <input type="checkbox" /> Batata asada
    </label>
  </li>
</ul>

Pseudo-elementos

Un pseudo-elemento (::before, ::marker…) empieza con :: y estiliza una parte de la caja. ::before y ::after crean un hijo al principio y al final, pero solo si tienen content. No funcionan en elementos reemplazados como <img>.

Ese contenido no se puede seleccionar, pero los lectores de pantalla en general sí lo leen. No pongas ahí nada importante, y si es decorativo, dale un texto alternativo vacío. La primera línea es para navegadores que no entienden la barra:

1.destacado::before {
2  content: "★";
3  content: "★" / "";
4}

1. Viñeta::markerLa viñeta o el número de un ítem de lista. Acepta pocas propiedades, como color y las de fuente.
2. Campos y selección::placeholder · ::selectionEl texto de ejemplo de un campo, y el texto que la persona seleccionó.
3. Primera línea y letra::first-line · ::first-letterLa primera línea y la primera letra de un bloque.

En CSS2 los pseudo-elementos también usaban :, así que :before todavía funciona. Los nuevos, como ::marker, solo aceptan ::.

Cuánto pesan en la especificidad

Una pseudo-clase suma como una clase, y un pseudo-elemento como un tipo. Hay tres excepciones: :where() siempre vale 0, y :is(), :not() y :has() valen lo que su argumento más específico.

Por eso :where() sirve para estilos base fáciles de pisar, y por eso un solo id dentro de :is() sube el peso de toda la lista.

En Tailwind

En Tailwind las pseudo-clases y los pseudo-elementos son variantes: un prefijo con dos puntos delante de la clase. hover:bg-current/12 aplica el fondo solo con :hover, y before: ya agrega content vacío por vos.

1<ul class="list-inside list-disc marker:text-current/50">
2  <li class="odd:bg-current/6 hover:bg-current/12">
3    <label class="has-checked:line-through has-checked:opacity-60">
4      <input type="checkbox" /> Regar las plantas
5    </label>
6  </li>
7</ul>
8
9<input type="email" placeholder="Tu email" required
10  class="placeholder:text-neutral-500 user-invalid:border-red-500" />