Torun seçici
Coddy'nin CSS Seçicileri kursunda ders 8 / 15.
Önceki konuda, bir öğenin doğrudan çocuklarını hedefleyen çocuk birleştiriciyi (child combinator) öğrenmiştik. Şimdi, boşlukla ifade edilen alt öğe seçicilerini (descendant selectors) inceleyelim. Bir alt öğe seçicisi, yalnızca doğrudan çocuklar değil, başka bir öğenin içinde herhangi bir seviyede yuvalanmış öğeleri hedeflemenize olanak tanır.
Sözdizimi
selector1 selector2 {
/* property declarations */
}Örneğin,
<html>
<head>
<title>Combinator</title>
<style>
div p {
color: red;
font-size: 2em;
}
</style>
</head>
<body>
<div>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>
</body>
</html>Yukarıdaki CSS kuralı, her iki paragrafı da kırmızı yapacak ve 2em yazı tipi boyutuna sahip olacaktır.
Çocuk seçicilerle nasıl bir ilişkisi vardır?
Bir alt öğe seçicisi, bir çocuk seçiciden daha geneldir. Bu, bir alt öğe seçicisinin belirtilen bir öğenin alt öğesi olan tüm öğelerle eşleşeceği, çocuk seçicinin ise yalnızca belirtilen bir öğenin doğrudan alt öğesi olan öğelerle eşleşeceği anlamına gelir.
Örneğin, div p seçicisi, diğer p öğelerinin içine yuvalanmış p öğeleri de dahil olmak üzere, bir div öğesinin alt öğesi olan tüm p öğeleriyle eşleşecektir. div > p seçicisi ise yalnızca bir div öğesinin doğrudan alt öğesi olan p öğeleriyle eşleşecektir.
Görev
KolayÖnceki alıştırmanın üzerine inşa ederek, aynı HTML yapısını kullanalım. Yuvalama seviyelerine bakılmaksızın .list öğesinin içindeki tüm paragrafları stillendirmek için alt seçiciyi (descendant selector) kullanarak bir CSS kuralı yazın. Onlara uygun gördüğünüz yeni bir renk, boyut ve yazı tipi verin.
Kendin dene
<html>
<head>
<title>Descendant Selector Exercise</title>
<style>
/* CSS Code goes here */
</style>
</head>
<body>
<div>
<p>This paragraph is not inside a list</p>
<ul class="list">
<li>
<p>This is a paragraph inside a list item.</p>
</li>
<li>
<div>
<p>This is a paragraph inside a nested div within a list item.</p>
</div>
</li>
</ul>
</div>
</body>
</html>