Selector de hijo

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

El selector de hijos ( > ) se utiliza cuando queremos aplicar estilos a elementos que son hijos directos de otro elemento. A diferencia del selector de descendientes, solo selecciona hijos directos, no los que están en niveles más profundos.

Por ejemplo:

<div class="parent">
  <p>This is a direct child</p>
  <section>
    <p>This is a grandchild (not a direct child)</p>
  </section>
</div>

Aplica estilos solo a los hijos directos:

.parent > p {
  color: red;
}

Después de aplicar este CSS, solo el primer párrafo "This is a direct child" estará en rojo. El segundo párrafo no se verá afectado porque no es un hijo directo del div con la clase "parent".

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

Tienes un .team-container que contiene varias secciones de equipo. Tu tarea es:

Usa el selector de hijos para dar estilo a los elementos div que son hijos directos dentro de .team-container con un fondo "lightblue", un padding de "10px" y un margin de "5px".
Usa el selector de hijos para dar estilo a los elementos <h3> que son hijos directos dentro de los divs .team con un color "green" y un tamaño de fuente de "20px".

Hoja de referencia

El selector de hijo (>) selecciona solo los hijos directos de un elemento, no los descendientes más profundos.

Sintaxis:

parent > child {
  /* estilos */
}

Ejemplo:

<div class="parent">
  <p>Direct child - will be styled</p>
  <section>
    <p>Grandchild - won't be styled</p>
  </section>
</div>

.parent > p {
  color: red;
}

Solo el primer párrafo será rojo porque es un hijo directo de .parent.

Pruébalo tú mismo

<html>
<head>
    <title>Child Selector</title>
    <style>
       /* Write CSS rules here */
       
    </style>
</head>
<body>
    <div class="team-container">
        <div class="team">
            <h3>Basketball Team</h3>
            <ul>
                <li>LeBron James</li>
                <li>Stephen Curry</li>
                <li>Kevin Durant</li>
            </ul>
        </div>
        <div class="team">
            <h3>Football Team</h3>
            <ul>
                <li>Tom Brady</li>
                <li>Patrick Mahomes</li>
                <li>Davante Adams</li>
            </ul>
        </div>
        <div class="team">
            <h3>Soccer Team</h3>
            <ul>
                <li>Lionel Messi</li>
                <li>Cristiano Ronaldo</li>
                <li>Neymar Jr.</li>
            </ul>
        </div>
    </div>
</body>
</html>

Ponte a prueba

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