Teoría
Teoría

La pseudoclase :nth-child

Las pseudoclases del ejercicio anterior pertenecen a la familia de pseudoclases que permiten seleccionar elementos según su posición.

Recordemos el ejercicio 4. Allí cada elemento <li> tenía su propia clase. Con esas clases podíamos seleccionar cualquiera de los cinco elementos. Si hubiera diez, necesitaríamos diez clases distintas para usar el mismo método.

La pseudoclase :nth-child permite seleccionar elementos por su posición, sin usar clases. Su sintaxis es selector:nth-child(expresión). La expresión puede ser un número o una fórmula. Por ejemplo:

li:nth-child(2) { ... }
li:nth-child(4) { ... }
li:nth-child(2n) { ... }

El primer selector selecciona el segundo elemento de la lista; el segundo, el cuarto; y el tercero, todos los que ocupan posiciones pares.

index.html
style.css

HTML

<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <title>La pseudoclase :nth-child</title> <link rel="stylesheet" href="course-1.css"> <link rel="stylesheet" href="style.css"> </head> <body> <ul class="target"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> </body> </html>

CSS

ObjetivosRealizado

Por desgracia, nuestro biatleta queda fuera de la lucha por el tercer puesto.

El biatleta acertó todos los blancos, excepto el tercero y el cuarto.