Çocuk seçici
Coddy'nin CSS Seçicileri kursunda ders 7 / 15.
Çocuk seçici (child selector), belirtilen bir öğenin doğrudan çocukları olan tüm öğeleri seçen bir CSS seçici türüdür. Çocuk seçici, iki seçici arasındaki büyüktür işareti (>) ile gösterilir.
Örnek:
Aşağıdaki HTML yapısını inceleyin:
<div class="parent">
<p>This is a direct child paragraph.</p>
<div>
<p>This is an indirect child paragraph.</p>
</div>
</div>Doğrudan çocuk paragrafı hedeflemek için çocuk birleştiriciyi (child combinator) şu şekilde kullanırsınız:
.parent > p {
color: blue;
}Bu örnekte, yalnızca doğrudan çocuk olan paragraf maviye dönecek, içteki <div> içine yerleştirilmiş olan değil.
Çocuk seçiciler, belirtilen bir öğenin doğrudan çocuğu olmayan öğelerin stillendirilmesini önlemek için de kullanılabilir. Örneğin, bir p öğesinin doğrudan çocuğu olan tüm bağlantıları kırmızı olacak şekilde stillendirmek için bir çocuk seçici kullanabilirsiniz.
Görev
KolayAşağıdaki HTML yapısı verildiğinde, <ul> öğesinin içindeki doğrudan liste öğelerinin arka plan rengini yellow yapacak şekilde doğrudan alt öğe birleştiricisini (child combinator) kullanarak bir CSS kuralı oluşturun.
Kendin dene
<html>
<head>
<title>Child Selector Exercise</title>
<style>
/* CSS Code goes here */
</style>
</head>
<body>
<ul class="list">
<li>This is a direct list item.</li>
<div>
<li>This is an indirect list item.</li>
</div>
</ul>
</body>
</html>