XHTML elementlere sınıf atamasını class özelliği ile gerçekleştiririz. Sınıflar, XHTML elementlerin birer özelliği olduğundan, CSS Özellik Seçicileri kullanılarak XHTML elementleri, sınıflarına göre seçebiliriz.

İçerik ve sunumun birbirinden ayrıldığı modern web uygulamalarında, CSS ile içeriği şekillendirmenin ilk adımı, şekillendirilecek XHTML etiketlerin doğru bir şekilde seçilmesidir. Bu seçme işlemi CSS Seçicileri ile gerçekleştirilir. Bazı durumlarda CSS dokümanı içerisinde bir XHTML elemana ait, birden fazla seçme işlemi yapılabilir ve kural tanımlanabilir. Burada kritik olan, hangisinin tarayıcı tarafından öncelikle yorumlanacağı konusudur. Bu da CSS’de Belirlilik (Specificity) ilkesine göre belirlenir.

Pseudo sınıf ve elementleri, diğer CSS Seçicilerinden farklı olarak, XHTML elementlerin seçilmesi işlemini, elementlerin özel durumlarına göre yapmamıza imkân tanır. Böylece XHTML doküman yapısı içerisinden erişemediğimiz elementlere özel olarak erişmiş oluruz.  Yani, pseudo sınıf ve elementlerini kullanarak bir linki, tıklanmış olma ya da olmama durumuna göre farklı olarak şekillendirebiliriz, ya da bir paragrafın ilk satırını ya da ilk harfini dinamik olarak seçebiliriz. CSS pseudo sınıfları ve elementleri CSS3 ile daha da zenginleşiyor. Buradan yeni pseudo sınıflarını görebilirsiniz.

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.

CSS’de ilk adım seçim yapmaktır. CSS, bize sağladığı özellik seçiciler ile bu seçme işlemini daha spesifik ve etiketlerin özelliklerine göre yapmamıza imkan tanır. Bazı durumlarda XHTML elementlerin özelliklerine göre seçim yapmak ihtiyacı duyabiliriz. Şu yazımda özellik seçicilerin pratikte nasıl kullanılabileceğini örneklemeye çalışmıştım.

CSS’de, XHTML elementler arasındaki akrabalık ilişkisine göre seçim yapma imkânına sahibiz. Böylece her element için özel bir sınıf, ya da ID tanımlamaktan da kurtulmuş oluruz.  Pratik kullanımda dikkat edilmesi gereken, ailesel seçicilerin referans alınabilecek bir Sınıf ya da ID seçiciye göre tanımlanması gerekliliğidir. İsterseniz bu akrabalık ilişkilerine birlikte göz atalım.

CSS’in ikinci sürümü ile birlikte gelen Evrensel Seçici (Universal Selector) (*), bir XHTML doküman içerisindeki bütün ögeleri hızlıca seçmemizi sağlar.