El poder de los patrones: Usando nth-child

Parte de la sección CSS Mastery del Journey de HTML de Coddy — lección 15 de 43.

La pseudo-clase :nth-child() selecciona elementos basándose en su orden dentro de un padre, utilizando un número o un patrón para elegir cuáles.

Por ejemplo, tenemos una lista:

<ul>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
  <li>Fourth item</li>
  <li>Fifth item</li>
</ul>

Así es como seleccionamos los elementos de una lista con numeración par:

li:nth-child(even) {
  background-color: lightblue;
}

Así es como seleccionamos el tercer elemento:

li:nth-child(3) {
  font-weight: bold;
}

Así es como seleccionamos cada 5º elemento:

li:nth-child(5n) {
  color: red;
}

Ponte a prueba

Esta lección incluye un breve cuestionario. Empieza la lección para responderlo y registrar tu progreso.

Ponte a prueba

Esta lección incluye un breve cuestionario. Empieza la lección para responderlo y registrar tu progreso.

Ponte a prueba

Esta lección incluye un breve cuestionario. Empieza la lección para responderlo y registrar tu progreso.

Desafío

Fácil

Crea una regla CSS usando :nth-child() para dar a cada tercer <div> un fondo amarillo.

Hoja de referencia

La pseudoclase :nth-child() selecciona elementos basándose en su orden dentro de un padre.

Seleccionar elementos con número par:

li:nth-child(even) {
  background-color: lightblue;
}

Seleccionar un elemento específico (el 3º):

li:nth-child(3) {
  font-weight: bold;
}

Seleccionar cada n-ésimo elemento (cada 5º):

li:nth-child(5n) {
  color: red;
}

Pruébalo tú mismo

<!DOCTYPE html>
<html>
<head>
    <title>Pattern Power: Using nth-child</title>
  <style>
    /* Write your CSS rule here */
    
  </style>
</head>
<body>
  <div class="container">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
    <div>Item 4</div>
    <div>Item 5</div>
    <div>Item 6</div>
    <div>Item 7</div>
    <div>Item 8</div>
    <div>Item 9</div>
    <div>Item 10</div>
  </div>
</body>
</html>

Ponte a prueba

Esta lección incluye un breve cuestionario. Empieza la lección para responderlo y registrar tu progreso.