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.

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

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

Kopya kağıdı

Torun seçici (descendant selector), başka bir öğenin içinde bulunan öğeleri, derinlemesine iç içe geçmiş olsalar bile stillendirir.

Sözdizimi: Ebeveyn ve torun seçiciler arasında bir boşluk kullanın:

.container p {
    color: blue;
}

Bu, iç içe geçme seviyesine bakılmaksızın container sınıfına sahip herhangi bir öğenin içindeki tüm <p> öğelerini seçer.

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>

Kendini test et

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