Temel CSS seçicilerinden olan sınıf (class) seçicileri şu yazımda sizlere paylaşmıştım. CSS ile XHTML içeriğimizi şekillendirirken aslında sadece bir sınıf seçici kullanmak durumunda değiliz. Uygulamanın ihtiyaçlarına göre, bazı XHTML elementlerinde çoklu sınıf kullanmamız gerekebilir.

Tanıyalım

İsterseniz çoklu sınıf kullanımını örnek bir XHTML içerik üzerinden konuşalım.

<p class="alignRight first-paragraph">Paragraf</p>

Yukarıdaki örnekte gördüğünüz gibi bir paragraf etiketine birden fazla class atanmış durumda… Bir XHTML elemente birden fazla class uygulamak istersek her class arasına boşluk gelecek şekilde kullanmamız gerekiyor.

.alignRight {
	text-align:right;
}
.first-paragraph {
	color:red;
	font-weight:bold;
	text-align:left;
}

Daha çok, çoklu sınıfları, bir XHTML elemente belirli bir özellik vermek istediğimizde kullanırız. Böylece birden fazla yerde kullanabileceğimiz alignRight sınıfındaki tanımlamayı, first-paragraph sınıfında tekrardan tanımlamamıza gerek kalmaz.

Cascading?

Bu kavram bilmeyenler için sorun teşkil edebilir. Kısaca özetlersem cascading; bir XHTML elementi işaret eden kurallardan hangisinin onu etkileyeceğinin bulunması sürecidir. Bu önemlidir çünkü; CSS’de kurallar yukarıdan aşağıya tanımlanarak, farklı belirlilik (specificity) değerleri çerçevesinde XHTML elementlere etki ederler.

Hemen örnekleyelim;

<p class="kirmizi sari mavi">Paragraf</p>

Şimdi de CSS’i oluşturalım;

.kirmizi {color:red;}
.sari {color:yellow;}
.mavi {color:blue;}

Şimdi sorulması gereken soru şu: Paragrafa hangi renk uygulanacak? Burada W3C tavsiyesi uyarınca aynı seviyedeki (specificity) bu üç sınıftan en son gelen, yani mavi sınıfı paragrafa uygulanacaktır. Sizce XHTML’de sınıfların yazılma sırasını değiştirmek herhangi bir şeyi değiştirir mi?

<p class="sari mavi kirmizi">Paragraf</p>

Yukarıdaki örnekteki gibi, sınıfların XHTML içerisinde yazılma sıralarının değiştirilmesi, sonucu değiştirmez. Çünkü CSS içerisinde aynı özelliğe ve aynı belirlilik (specificity) değerine sahip olan ve aynı elementi işaret eden kurallar yukardan aşağı okunur ve en son geleni baskın olarak XHTML elemente yansır.

Çoklu Sınıf Seçimi

CSS bize çoklu sınıf uygulanmış bir XHTML elementi spesifik olarak seçmemize imkan tanır.

<p class="uyari alternatif_1">Paragraf</p>

Şimdi de aşağıdaki CSS kodlarını oluşturalım;

.uyari.alternatif_1 {color:red;} /* Çoklu Sınıf Seçimi */
.alternatif_1 {color:green}
.uyari {font-size:1.6em;}

Yukarıdaki çoklu CSS seçimi ile, ilgili paragrafımızı spesifik olarak seçerek, buradaki kuralın paragrafa uygulanmasını sağladık. Böylece kırmızı renk baskın gelerek,  XHTML elemente uygulanmış oldu.

Fırından yeni çıkmış yazılardan haberdar olmak için RSS yayınıma abone olabilir ya da beni Twitter'dan takip edebilirsiniz.