Teoría
Teoría

Combinación de descendientes y hermanos

Los selectores de CSS se pueden combinar de muchas formas. Por ejemplo, podemos combinar selectores de descendientes y de hermanos adyacentes.

El selector .player-1 .hit + .miss selecciona un elemento con la clase miss si justo antes tiene un hermano con la clase hit y ambos están dentro de un elemento con la clase player-1.

En este ejercicio practicarás esta combinación. La clase de cada biatleta marcará el contexto, y el selector de hermanos adyacentes servirá para elegir el blanco.

index.html
style.css

HTML

<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <title>Combinación de descendientes y hermanos</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 class="third">3</li> <li>4</li> <li>5</li> </ul> </div> <div class="shooter-2"> <ul class="target"> <li class="first">1</li> <li>2</li> <li class="third">3</li> <li>4</li> <li>5</li> </ul> </div> </body> </html>

CSS

ObjetivosRealizado

Empieza la batalla por el segundo puesto.

El primer biatleta cerró todos los blancos, excepto el cuarto.
El segundo falló el segundo disparo, y en el cuarto blanco hubo una falla del mecanismo.