Teoría
Teoría

Selectores de hijos

Todos los elementos que están dentro de un elemento padre son sus descendientes. Los que están directamente dentro de él se llaman elementos hijos. Mira este ejemplo:

<ul>
  <li><span>...</span></li>
  <li><span>...</span></li>
</ul>

Los elementos <li> son hijos y descendientes de la lista <ul>. Los elementos  son descendientes de ella, pero no son sus hijos.

Los selectores de descendientes seleccionan elementos a cualquier nivel de anidamiento, y eso no siempre nos conviene. A veces necesitamos aplicar estilos solo a los hijos directos. Esto resulta especialmente útil al trabajar con listas anidadas.

Para eso existe el selector de hijos, que usa el símbolo >. Por ejemplo: ul > li o ul > li > span.

En este ejercicio verás la diferencia entre los selectores de descendientes y los de hijos.

index.html
style.css

HTML

<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <title>Selectores de hijos</title> <link rel="stylesheet" href="course-3.css"> <link rel="stylesheet" href="style.css"> </head> <body> <h1>Resumen</h1> <ul class="places"> <li> Ustyugov <ul> <li> 0 vueltas de penalización </li> <li> 0 tiros extra </li> </ul> </li> <li> Cherezov <ul> <li> 0 vueltas de penalización </li> <li> 2 tiros extra </li> </ul> </li> <li> Bjørndalen <ul> <li> 1 vuelta de penalización </li> <li> 4 tiros extra </li> </ul> </li> </ul> </body> </html>

CSS

.places li { border-bottom: 2px solid #cccccc; } .places span { font-weight: bold; }

ObjetivosRealizado

Corrige la lista de resultados:

Deja el borde inferior solo en los elementos de la lista del primer nivel.
Deja en negrita solo los apellidos.