Clase pseudo CSS :nth-child()

La pseudo-clase :nth-child() selecciona y aplica estilos a los elementos en función de su índice.

:nth-child() puede especificarse mediante un número, una palabra clave o una fórmula.

Valores de palabras clave

impar

Representa aquellos elementos cuya posición numérica es impar (por ejemplo, 1, 3, 5, 7, etc.).

par

Representa aquellos elementos cuya posición numérica es par (por ejemplo, 2, 4, 6, 8, etc.).

Notación funcional

<An+B>

Representa aquellos elementos cuya posición numérica coincide con el patrón An+B (para cada valor entero positivo o cero de n). El índice del primer elemento es 1, y n en la fórmula comienza desde 0. Los valores A y B deben ser enteros.

Versión

Nivel 4 de Selectores

Nivel 3 de Selectores

Sintaxis

Sintaxis de CSS :nth-child()

css

:nth-child() {
  css declarations;
}

Ejemplo del selector :nth-child:

:nth-child() ejemplo de código

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p:nth-child(3) {
        background: #ccc;
      }
    </style>
  </head>
  <body>
    <h2>:nth-child selector example</h2>
    <div>
      <p>Paragraph 1</p>
      <p>Paragraph 2</p>
      <p>Paragraph 3</p>
      <p>Paragraph 4</p>
    </div>
  </body>
</html>

Try it Yourself »

Ejemplo de las palabras clave "impar" y "par":

CSS :nth-child() impar, par

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p:nth-child(odd) {
        background: #1c87c9;
        color: #eeeeee;
      }
      p:nth-child(even) {
        background: #666666;
        color: #eeeeee;
      }
    </style>
  </head>
  <body>
    <p>The first paragraph.</p>
    <p>The second paragraph.</p>
    <p>The third paragraph.</p>
  </body>
</html>

Try it Yourself »

Práctica

¿Cuál es la función del selector nth-child() en CSS?

El selector nth-child() en CSS coincide con cada elemento que es el hijo n-ésimo, independientemente de su tipo, de su padre.El selector nth-child() solo se aplica a elementos hijos de un tipo específico.El selector nth-child() se utiliza para seleccionar el n-ésimo hermano de un elemento.El selector nth-child() puede tener un argumento que represente un número entero, números impares o pares, o una expresión (n+an+b).El selector nth-child() se puede utilizar para seleccionar un elemento en función de los atributos de su padre.

Clase pseudo CSS :nth-child() ​

Valores de palabras clave ​

impar ​

par ​

Notación funcional ​

<An+B> ​

Versión ​

Sintaxis ​

Ejemplo del selector :nth-child: ​

Ejemplo de las palabras clave "impar" y "par": ​

Práctica ​