Çocuk Seçici

Coddy'nin HTML Journey'sinin CSS Mastery bölümünün bir parçası — ders 3 / 43.

Çocuk seçici ( > ), başka bir öğenin doğrudan çocukları olan öğeleri stillendirmek istediğimizde kullanılır. Torun seçicinin aksine, yalnızca doğrudan çocukları seçer, daha derindekileri seçmez.

Örneğin:

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

Stili yalnızca doğrudan alt öğelere uygulayın:

.parent > p {
  color: red;
}

Bu CSS'i uyguladıktan sonra, sadece ilk paragraf olan "This is a direct child" kırmızı olacaktır. İkinci paragraf, "parent" sınıfına sahip div'in doğrudan bir alt öğesi olmadığı için etkilenmeyecektir.

Görev

Kolay

Birkaç takım bölümü içeren bir .team-container yapınız var. Göreviniz şunları yapmaktır:

.team-container içerisindeki doğrudan alt div'leri 'lightblue' arka plan, '10px' padding ve '5px' margin ile stillendirmek için çocuk seçiciyi kullanın.
.team div'leri içerisindeki doğrudan <h3> öğelerini 'green' rengi ve '20px' yazı tipi boyutu ile stillendirmek için çocuk seçiciyi kullanın.

Kendin dene

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