Clase pseudo CSS :nth-of-type()

La pseudoclase :nth-of-type() selecciona los elementos del mismo tipo en función de su índice.

:nth-of-type() puede especificarse mediante un número, una palabra clave o una fórmula. El selector :nth-of-type() es similar a :nth-child, pero existe una diferencia: es más específico. :nth-of-type() apunta a un tipo determinado de elemento en la disposición solo en relación con sus hermanos similares.

Versión

Nivel 4 de Selectores

Nivel 3 de Selectores

Sintaxis

Sintaxis de CSS :nth-of-type()

css

:nth-of-type(number) {
  css declarations;
}

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

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

html

<!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>

Try it Yourself »

Ejemplo de :nth-of-type especificado como "impar" y "par":

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

html

<!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>

Try it Yourself »

Práctica

¿Qué selecciona el selector CSS :nth-of-type()?

Selecciona cada elemento que es el hijo enésimo, independientemente del tipo, de su padre.Selecciona cada elemento que es el hijo enésimo de un tipo particular de su padre.Selecciona el tipo único de cada elemento en un documento HTML.Selecciona los elementos en función de su posición en un grupo o una pseudoclase.

Clase pseudo CSS :nth-of-type() ​

Versión ​

Sintaxis ​

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