CSS'te Belirtilen Sınıfa Sahip Etiket

Aynı sınıfa sahip iki farklı etiket türümüz olduğunu varsayalım. Örneğin, hem h2 başlıklarının hem de paragrafların aynı sınıfa sahip olduğunu düşünelim:

<h2 class="eee">Başlık</h2>
<p class="eee">
	metin
</p>

<h2 class="eee">Başlık</h2>
<p class="eee">
	metin
</p>

Örneğin, bu sınıfa sahip tüm öğeleri kırmızı renge boyayabiliriz:

.eee {
	color: red;
}

Ancak, belirli bir etikete sınıfıyla birlikte erişmek de mümkündür. Örneğin, h2 etiketlerinden eee sınıfına sahip olanları ayrı seçebilir ve aynı sınıfa sahip tüm p etiketlerini ayrı seçebiliriz.

Bunun için seçicide önce etiket adı, ardından bitişik şekilde sınıf adı yazılmalıdır. Örneğin, bizim sınıfımıza sahip h2 etiketlerini kırmızı renge, aynı sınıfa sahip paragrafları ise yeşil renge boyayalım:

h2.eee {
	color: red;
}
p.eee {
	color: green;
}

Aşağıdaki kod verilmiştir:

<h2 class="header">metin</h2>
<h2 class="header">metin</h2>
<h3 class="header">metin</h3>
<h3 class="header">metin</h3>

.header {
	color: red;
}

header sınıfına sahip tüm h2 etiketlerini 40px boyutunda, bu sınıfa sahip tüm h3 etiketlerini ise 30px boyutunda yapın.