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

Kendini test et

Bu ders kısa bir quiz içerir. Soruları yanıtlamak ve ilerlemeni kaydetmek için derse başla.

Kendini test et

Bu ders kısa bir quiz içerir. Soruları yanıtlamak ve ilerlemeni kaydetmek için derse başla.

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.

Kopya kağıdı

Çocuk seçici (>), bir öğenin yalnızca doğrudan çocuklarını seçer, daha derin torunları seçmez.

Sözdizimi:

parent > child {
  /* styles */
}

Örnek:

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

.parent > p {
  color: red;
}

Yalnızca ilk paragraf kırmızı olacaktır çünkü .parent öğesinin doğrudan bir çocuğudur.

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>

Kendini test et

Bu ders kısa bir quiz içerir. Soruları yanıtlamak ve ilerlemeni kaydetmek için derse başla.