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;
}