W3docs
es
Iniciar sesión

CSS :nth-of-type() Pseudo Clase

La pseudo-clase :nth-of-type() de CSS selecciona elementos del mismo tipo. Aprende sobre la pseudo-clase y practica con ejemplos.

La pseudo-clase :nth-of-type() selecciona elementos según su posición entre hermanos del mismo tipo (el mismo nombre de etiqueta). El conteo empieza en 1, por lo que p:nth-of-type(1) es el primer <p> dentro de un padre, el segundo <p> es 2, y así sucesivamente.

El argumento dentro de los paréntesis puede ser un número, la palabra clave odd o even, o una fórmula de la forma an + b. Esto lo convierte en una forma flexible de aplicar estilos a "cada tercer elemento", "todas las filas pares" o "todo a partir del primero" sin agregar clases adicionales al HTML.

:nth-of-type() vs :nth-child()

Esta es la distinción que más confunde a la gente, por lo que vale la pena ser preciso.

  • :nth-child() cuenta todos los elementos hermanos y luego verifica si el elemento coincide con el tipo solicitado.
  • :nth-of-type() cuenta solo los hermanos del mismo tipo, ignorando todo lo demás.

Considera este marcado:

<div>
  <h2>Heading</h2>
  <p>Paragraph A</p>
  <p>Paragraph B</p>
</div>
  • p:nth-child(2) selecciona Paragraph A — es el 2° hijo en general, y es un <p>.
  • p:nth-of-type(2) selecciona Paragraph B — es el 2° <p>, independientemente del <h2> que está antes.

Usa :nth-of-type() cuando el padre mezcla diferentes tipos de elementos y quieres contar solo uno de ellos.

Versión

Selectors Level 4

Selectors Level 3

Sintaxis

Sintaxis CSS :nth-of-type()

:nth-of-type(number | odd | even | an+b) {
  css declarations;
}

El argumento acepta:

  • Un número — :nth-of-type(3) apunta al 3er elemento de ese tipo.
  • odd / even — palabras clave convenientes para elementos alternos (odd = 1, 3, 5…; even = 2, 4, 6…).
  • Una fórmula an + b — por ejemplo :nth-of-type(3n) coincide con cada 3er elemento, y :nth-of-type(2n+1) es equivalente a odd. Aquí n empieza en 0 y va aumentando, a es el paso y b es el desplazamiento.

Ejemplo del selector :nth-of-type():

Ejemplo de código CSS :nth-of-type()

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p:nth-of-type(3) {
        background: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>:nth-of-type() selector example</h2>
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
    <p>Paragraph 3</p>
  </body>
</html>
Pruébalo tú mismo »

Ejemplo de :nth-of-type especificado como "odd" y "even":

Otro ejemplo de código CSS :nth-of-type()

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p:nth-of-type(odd) {
        background: #1c87c9;
      }
      p:nth-of-type(even) {
        background: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>nth-of-type() selector example</h2>
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
    <p>Paragraph 3</p>
    <p>Paragraph 4</p>
    <p>Paragraph 5</p>
    <p>Paragraph 6</p>
    <p>Paragraph 7</p>
    <p>Paragraph 8</p>
    <p>Paragraph 9</p>
    <p>Paragraph 10</p>
  </body>
</html>
Pruébalo tú mismo »

Uso de una fórmula an+b

Una fórmula permite apuntar a un patrón repetitivo. El ejemplo a continuación resalta cada 3er párrafo (3n) y, por separado, cada párrafo a partir del 4° (n+4):

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p:nth-of-type(3n) {
        background: #8ebf42;
      }
      p:nth-of-type(n + 4) {
        font-weight: bold;
      }
    </style>
  </head>
  <body>
    <h2>nth-of-type() formula example</h2>
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
    <p>Paragraph 3</p>
    <p>Paragraph 4</p>
    <p>Paragraph 5</p>
    <p>Paragraph 6</p>
  </body>
</html>

Con 3n, los párrafos 3 y 6 obtienen el fondo verde. Con n + 4, los párrafos 4, 5 y 6 aparecen en negrita (todos los párrafos a partir del 4°).

Bueno saber

  • El conteo empieza en 1, no en 0. :nth-of-type(1) es la primera coincidencia y se comporta como :first-of-type.
  • "Tipo" significa el nombre de la etiqueta, no una clase. :nth-of-type() no puede contar elementos .item específicamente — cuenta todos los elementos con esa etiqueta entre los hermanos. Si escribes .item:nth-of-type(2), coincide con un elemento que es el 2° de su tipo y tiene la clase item.
  • Para contar desde el final de la lista en lugar del inicio, usa :nth-last-of-type().

Páginas relacionadas

Práctica

Práctica
¿Qué selecciona el selector CSS :nth-of-type()?
¿Qué selecciona el selector CSS :nth-of-type()?
Was this page helpful?