Alt Öğe Seçicisi

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

İlk seçici alt öğe seçicisidir (descendant selector). Bunu, başka bir öğenin içindeki öğeleri, çok derinlerde yuvalanmış olsalar bile, stillendirmek istediğimizde kullanırız. Örneğin, bir kapsayıcının içinde iki paragraf bulunmaktadır.

<div class="container">
    <p>This is a paragraph inside a div.</p&    <section>
        <p>This is a paragraph inside a section that is inside a div.</p>
    </section>
</div>

Şimdi, div içindeki tüm paragrafları biçimlendirmek için bir alt öğe seçicisi (descendant selector) kullanalım:

.container p {
    color: blue;
}

.container div'inin içindeki tüm paragraflar — hatta section öğesinin içine yerleştirilmiş olan bile — maviye dönecek.

Görev

Kolay

"navigation" sınıfına sahip bir öğenin alt öğesi (descendant) olan tüm liste öğelerini (<li>) seçen ve metin renklerini purple olarak değiştiren bir CSS kuralı oluşturun.

Kendin dene

<html>
<head>
    <title>Descendant Selector</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <ul class="navigation">
        <li>Home</li>
        <li>Team
            <ul>
                <li>Players</li>
                <li>Coaches</li>
            </ul>
        </li>
        <li>Tickets</li>
    </ul>
</body>
</html>