CSS Alt Seçicilerinde Yeni Başlayanların Yaptığı Hata
Aşağıdaki seçiciye bir göz atın:
p.eee {
color: red;
}
Böyle bir seçicinin, eee sınıfına sahip
paragrafları seçeceğini zaten biliyor olmalısınız.
Örneğin, şunları:
<p class="eee">
lorem ipsum
</p>
<p class="eee">
lorem ipsum
</p>
Şimdi şu seçiciye bir bakın:
p .eee {
color: green;
}
Bu seçici, öncekinden farklıdır çünkü
etiket adı ile sınıf adı arasında
bir boşluk bulunur. Bu boşluk,
alt öğe seçicisini temsil eder.
Yani bu durumda, paragrafların içinde
bulunan, eee sınıfına sahip tüm
öğeleri seçiyoruz. Örneğin, bu
seçici aşağıdaki span'leri seçecektir:
<p>
lorem <span class="eee">ipsum</span>
</p>
<p>
lorem <span class="eee">ipsum</span>
</p>
Kodun çalıştırılmasının sonucu:
Yani, bir kez daha: p.eee - böyle bir seçici, eee sınıfına
sahip paragrafları seçer. Ama şöyle yaparsam: p .eee, o zaman
paragrafların içindeki eee sınıfına sahip tüm
öğeleri seçerim.
Bu farkı iyice anlayın.
Aşağıdaki kodda verilen seçicinin ne seçtiğini açıklayın. Ardından, bu seçiciye uygun HTML kodunu yazın. İşte seçicinin olduğu kod:
p.bbb {
color: red;
}
Aşağıdaki kodda verilen seçicinin ne seçtiğini açıklayın. Ardından, bu seçiciye uygun HTML kodunu yazın. İşte seçicinin olduğu kod:
p .bbb {
color: red;
}
Aşağıdaki kodda verilen seçicinin ne seçtiğini açıklayın. Ardından, bu seçiciye uygun HTML kodunu yazın. İşte seçicinin olduğu kod:
.eee p.bbb {
color: red;
}
Aşağıdaki kodda verilen seçicinin ne seçtiğini açıklayın. Ardından, bu seçiciye uygun HTML kodunu yazın. İşte seçicinin olduğu kod:
.eee p .bbb {
color: red;
}