Alt Öğe Seçicisi

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

İlk seçici alt öğe seçicisidir. Başka bir öğenin içinde bulunan, hatta derinlemesine iç içe geçmiş öğeleri biçimlendirmek istediğimizde bunu kullanırız. Örneğin, bir kapsayıcının içinde iki paragraf vardı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 kullanalım:

.container p {
    color: blue;
}

.container div'inin içindeki tüm paragraflar, section öğesinin içine yerleştirilmiş olan da dahil olmak üzere maviye dönüşür.

Görev

Kolay

"navigation" sınıfına sahip bir öğenin alt öğeleri olan tüm liste öğelerini (<li>) seçen ve metin renklerini mora dönüştüren 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>