Docs ejecutables de CSS: Pseudoclases CSS

Q: ¿Cómo funciona nth-child en CSS?

:nth-child(an+b) selecciona los elementos cuya posición entre sus hermanos es a×n+b para n = 0, 1, 2 y así sucesivamente, contando desde 1. :nth-child(3) es el tercer hijo, :nth-child(odd) o 2n+1 todos los impares y :nth-child(n+4) el cuarto y los siguientes.

Q: ¿Qué diferencia hay entre nth-child y nth-of-type?

:nth-child() cuenta todos los elementos hermanos y después comprueba el resto del selector; :nth-of-type() cuenta solo los hermanos del mismo tipo de elemento. En una lista con un h2 seguido de párrafos, p:nth-child(1) no selecciona nada, mientras que p:nth-of-type(1) selecciona el primer párrafo.

Q: ¿Cómo se usa :not() en CSS?

Pon entre paréntesis el selector que quieres excluir: li:not(.done) selecciona todos los elementos de lista sin la clase done. También acepta una lista, input:not([type="checkbox"], [type="radio"]).

Q: ¿Qué diferencia hay entre una pseudoclase y un pseudoelemento?

Una pseudoclase (un signo de dos puntos, :hover) selecciona un elemento existente completo en cierto estado. Un pseudoelemento (dos signos de dos puntos, ::before) apunta a una parte de un elemento o crea contenido generado.

Qué es una pseudoclase

Una pseudoclase es una palabra clave después de dos puntos que selecciona elementos por su posición en el documento o por su estado. La agregas a un selector normal: li:first-child, input:focus, a:hover.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Pseudo-classes</title>
  <style>
    li { padding: 6px 10px; list-style: none; }
    li:nth-child(odd) { background: #e5e7eb; }       /* zebra stripes */
    li:first-child { font-weight: bold; }
    li:last-child { color: #2563eb; }
    li:not(.done) { border-inline-start: 4px solid #f59e0b; }
  </style>
</head>
<body>
  <ul>
    <li>First child: bold</li>
    <li class="done">Done: no amber edge</li>
    <li>Odd rows are gray</li>
    <li class="done">Done</li>
    <li>Last child: blue</li>
  </ul>
</body>
</html>

Las pseudoclases de estado para enlaces y el mouse (:hover, :active, :visited) tienen su propia página, hover en CSS.

:nth-child() y la fórmula an+b

:nth-child() acepta un número, una palabra clave o una fórmula an+b. El navegador prueba n = 0, 1, 2, ... y selecciona cada posición que produce la fórmula (las posiciones empiezan en 1).

Fórmula	Posiciones que selecciona	Significado
`3`	3	El tercer hijo
`odd` o `2n+1`	1, 3, 5, ...	Filas impares
`even` o `2n`	2, 4, 6, ...	Filas pares
`3n`	3, 6, 9, ...	Uno de cada tres
`n+4`	4, 5, 6, ...	El cuarto y los siguientes
`-n+3`	1, 2, 3	Los tres primeros
`3n+1`	1, 4, 7, ...	Uno de cada tres, empezando por el primero

Escribe una fórmula y mira qué elementos coinciden:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>nth-child tester</title>
  <style>
    .grid { display: grid; grid-template-columns: repeat(6, 40px); gap: 6px; padding: 0; }
    .grid li {
      list-style: none;
      height: 40px;
      display: grid;
      place-items: center;
      background: #e5e7eb;
      border-radius: 6px;
    }
  </style>
  <style id="live"></style>
</head>
<body>
  <label>li:nth-child( <input id="f" value="3n+1" size="8"> )</label>
  <ul class="grid" id="grid"></ul>
  <script>
    const grid = document.getElementById('grid');
    for (let i = 1; i <= 18; i++) grid.innerHTML += '<li>' + i + '</li>';
    const input = document.getElementById('f');
    const update = () => {
      document.getElementById('live').textContent =
        '.grid li:nth-child(' + input.value + ') { background: #2563eb; color: white; }';
    };
    input.addEventListener('input', update);
    update();
  </script>
</body>
</html>

Prueba odd, even, 4, n+7, -n+5 y 2n+3. Una fórmula inválida no selecciona nada.

Su gemela que cuenta desde el final es :nth-last-child(): li:nth-last-child(-n+2) selecciona los dos últimos elementos.

nth-child vs nth-of-type

:nth-child() cuenta todos los elementos hermanos, sea cual sea su etiqueta, y solo después comprueba el resto del selector. :nth-of-type() cuenta solo los hermanos con la misma etiqueta. La diferencia se nota en cuanto los hermanos están mezclados:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>nth-of-type</title>
  <style>
    p, h2 { margin: 4px 0; padding: 4px 8px; }
    p:nth-child(2) { background: #f59e0b; }   /* 2nd child AND a p */
    p:nth-of-type(2) { color: #2563eb; font-weight: bold; } /* 2nd p */
  </style>
</head>
<body>
  <h2>Heading (child 1)</h2>
  <p>Paragraph 1, child 2: amber</p>
  <p>Paragraph 2, child 3: blue and bold</p>
  <p>Paragraph 3, child 4</p>
</body>
</html>

Existen los mismos pares para los extremos: :first-child / :first-of-type, :last-child / :last-of-type, :only-child / :only-of-type.

:not(), :is() y :where()

Pseudoclase	Ejemplo	Selecciona
`:not(X)`	`li:not(.done)`	Elementos que no coinciden con X
`:is(X, Y)`	`:is(h1, h2, h3) a`	Elementos que coinciden con cualquiera de la lista
`:where(X, Y)`	`:where(ul, ol) li`	Igual que `:is()`, con especificidad cero
`:has(X)`	`li:has(> input:checked)`	Elementos que contienen algo que coincide con X

:not() es la que se usa a diario, por ejemplo para poner un separador entre elementos pero no después del último:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>not</title>
  <style>
    .tags { padding: 0; }
    .tags li { display: inline; list-style: none; }
    .tags li:not(:last-child)::after { content: " · "; color: #2563eb; }
    input:not([type="checkbox"]) { border: 2px solid #16a34a; }
  </style>
</head>
<body>
  <ul class="tags"><li>html</li><li>css</li><li>js</li></ul>
  <input type="text" placeholder="Text: green border">
  <input type="checkbox" aria-label="Checkbox, default border">
</body>
</html>

Pseudoclases de estado: focus, checked, disabled, invalid

Pseudoclase	Selecciona
`:focus`	El elemento que tiene el foco del teclado o del mouse
`:focus-visible`	Con foco, y el navegador decide que debe verse un anillo (normalmente con el teclado)
`:focus-within`	Un elemento que contiene al elemento con foco
`:checked`	Un checkbox o radio marcado, o una `<option>` seleccionada
`:disabled` / `:enabled`	Controles de formulario que están (o no) deshabilitados
`:required` / `:optional`	Inputs con o sin `required`
`:invalid` / `:valid`	Inputs cuyo valor no pasa o pasa la validación
`:user-invalid`	Inválido, pero solo después de que el usuario interactuó con él
`:placeholder-shown`	Un input que en ese momento muestra su placeholder
`:empty`	Un elemento sin hijos, ni siquiera texto
`:target`	El elemento cuyo id coincide con el `#fragment` de la URL

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>States</title>
  <style>
    input { padding: 6px; border: 2px solid #e5e7eb; border-radius: 6px; outline: none; }
    input:focus-visible { border-color: #2563eb; }
    input:user-invalid { border-color: #f59e0b; }
    .field:focus-within label { color: #2563eb; }
    input:checked + label { text-decoration: line-through; color: #16a34a; }
    button:disabled { opacity: 0.4; }
  </style>
</head>
<body>
  <p class="field">
    <label for="mail">Email</label>
    <input id="mail" type="email" required placeholder="you@example.com">
  </p>
  <p>
    <input type="checkbox" id="task" checked>
    <label for="task">Checked task</label>
  </p>
  <button disabled>Disabled button</button>
</body>
</html>

Haz clic en el campo de email: su label se vuelve azul gracias a :focus-within. Escribe algo que no sea un email y sal del campo: :user-invalid pone el borde ámbar. Un :invalid simple habría marcado en ámbar el campo obligatorio vacío antes de que lo tocaras.

Hagas lo que hagas con :focus, mantén un estilo de foco visible. Quitar el outline sin reemplazarlo deja a los usuarios de teclado sin saber dónde están.

:has(), el selector de padre

:has() selecciona un elemento según lo que contiene. Es el "selector de padre" que se pidió durante años, y funciona en las versiones actuales de Chrome, Firefox y Safari.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>has</title>
  <style>
    .option { display: block; border: 2px solid #e5e7eb; padding: 8px; margin: 6px 0; border-radius: 6px; }
    .option:has(input:checked) { border-color: #2563eb; background: #eff6ff; }
  </style>
</head>
<body>
  <label class="option"><input type="radio" name="plan" checked> Monthly</label>
  <label class="option"><input type="radio" name="plan"> Yearly</label>
</body>
</html>

Elige el otro plan: toda la tarjeta sigue al radio button, sin JavaScript.

Errores comunes

Un espacio antes de los dos puntos. li :first-child significa "un primer hijo dentro de un li". Escribe li:first-child.
Esperar que p:nth-child(1) signifique "el primer p". Significa "el primer hijo, si es un p". Usa :first-of-type para el primer p.
Contar desde 0. Las posiciones empiezan en 1: :nth-child(0) no selecciona nada.
Quitar los outlines de foco. :focus { outline: none } sin reemplazo rompe la navegación con teclado.
Confundir : y ::. :before es una forma antigua de escribir el pseudoelemento ::before; las pseudoclases siempre usan un solo signo de dos puntos.

Preguntas frecuentes

¿Qué es una pseudoclase en CSS?

Una palabra clave después de dos puntos que selecciona elementos por su estado o posición y no por su nombre, como a:hover, li:first-child o input:focus. Se agrega a un selector normal, y la mayoría de las pseudoclases cuentan como una clase en la especificidad (:where() cuenta cero).

¿Cómo funciona nth-child en CSS?

:nth-child(an+b) selecciona los elementos cuya posición entre sus hermanos es a×n+b para n = 0, 1, 2 y así sucesivamente, contando desde 1. :nth-child(3) es el tercer hijo, :nth-child(odd) o 2n+1 todos los impares y :nth-child(n+4) el cuarto y los siguientes.

¿Qué diferencia hay entre nth-child y nth-of-type?

:nth-child() cuenta todos los elementos hermanos y después comprueba el resto del selector; :nth-of-type() cuenta solo los hermanos del mismo tipo de elemento. En una lista con un h2 seguido de párrafos, p:nth-child(1) no selecciona nada, mientras que p:nth-of-type(1) selecciona el primer párrafo.

¿Cómo se usa :not() en CSS?

Pon entre paréntesis el selector que quieres excluir: li:not(.done) selecciona todos los elementos de lista sin la clase done. También acepta una lista, input:not([type="checkbox"], [type="radio"]).

¿Qué diferencia hay entre una pseudoclase y un pseudoelemento?

Una pseudoclase (un signo de dos puntos, :hover) selecciona un elemento existente completo en cierto estado. Un pseudoelemento (dos signos de dos puntos, ::before) apunta a una parte de un elemento o crea contenido generado.

Conceptos relacionados