Teoría
Teoría

:nth-child y selectores de descendientes

Los selectores con pseudoclases se combinan muy bien con los selectores de descendientes.

Por ejemplo, este selector selecciona el tercer elemento <li> dentro del bloque con la clase shooter-2:

.shooter-2 li:nth-child(3) { ... }

Un selector no tiene que terminar con una pseudoclase. Por ejemplo, el siguiente selecciona un elemento con la clase text que está dentro del cuarto elemento <li> de una lista:

li:nth-child(4) .text { ... }

En este ejercicio harás lo mismo que en el ejercicio 5, pero sin usar clases para los blancos.

index.html
style.css

HTML

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

CSS

ObjetivosRealizado

Parece que aún no está decidido quién ganará el oro.

El primer biatleta cerró todos los blancos, excepto el segundo y el quinto.
El segundo falló el primer disparo, pero acertó todos los demás.