Seletor de Filho

Parte da seção CSS Mastery do Journey de HTML da Coddy — lição 3 de 43.

O seletor de filho ( > ) é usado quando queremos estilizar elementos que são filhos diretos de outro elemento. Ao contrário do seletor de descendente, ele seleciona apenas filhos diretos, não os mais profundos.

Por exemplo:

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

Aplique a estilização apenas aos filhos diretos:

.parent > p {
  color: red;
}

Após aplicar este CSS, apenas o primeiro parágrafo "This is a direct child" ficará vermelho. O segundo parágrafo não será afetado porque não é um filho direto da div com a classe "parent".

Teste seus conhecimentos

Esta lição inclui um quiz rápido. Comece a lição para respondê-lo e acompanhar seu progresso.

Teste seus conhecimentos

Esta lição inclui um quiz rápido. Comece a lição para respondê-lo e acompanhar seu progresso.

Desafio

Fácil

Você tem um .team-container que contém várias seções de equipe. Sua tarefa é:

Use o seletor de filho para estilizar divs filhas diretas dentro de .team-container com um fundo "lightblue", padding de "10px" e margin de "5px".
Use o seletor de filho para estilizar elementos <h3> diretos dentro de divs .team com a cor "green" e tamanho de fonte de "20px".

Folha de consulta

O seletor de filho (>) seleciona apenas os filhos diretos de um elemento, não descendentes mais profundos.

Sintaxe:

parent > child {
  /* styles */
}

Exemplo:

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

.parent > p {
  color: red;
}

Apenas o primeiro parágrafo ficará vermelho porque ele é um filho direto de .parent.

Experimente você mesmo

<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>

Teste seus conhecimentos

Esta lição inclui um quiz rápido. Comece a lição para respondê-lo e acompanhar seu progresso.