CSS Sözde Sınıflar Kullanımı (Pseudo-class)

Bu dersimizde, “Pseudo-class” olarak adlandırılan CSS “sözde sınıflar” yapısının kullanımını inceleyeceğiz.

CSS Sözde Sınıflar

“Pseudo” terimi, Yunanca kökenli bir sözcüktür ve “yanıltıcı” veya “sahte” anlamına gelir. CSS’deki “pseudo-classes” (sözde sınıflar) terimi ile, bu elemanların aslında belirli bir sınıfa doğrudan atanmış olmadığı, ancak belirli durumlar veya koşullar altında elemanları stilize etmek için kullanıldığı gerçeğini ifade etmek için bu ismi almıştır.

CSS sözde sınıfları, web tasarımında belirli durumlar ve etkileşimler için son derece değerli araçlardır. Aslında bu yapılar olmadan, birçok dinamik stil değişikliği yapmak oldukça zorlaşır. Düşünelim; bir bağlantının üzerine geldiğimizde, renginin değişmesi veya bir form alanına tıkladığımızda çerçevesinin belirginleşmesi gibi interaktif özellikler, kullanıcının sayfa üzerindeki hareketlerine anlamlı geribildirimler sağlar. Bu, kullanıcı deneyimini zenginleştirir ve onlara sayfanın hangi bölümünde olduklarını veya neyle etkileşimde bulunduklarını daha net gösterir.

Sözde sınıfların bu kadar değerli olmasının bir diğer nedeni de, direkt olarak HTML’e müdahale etmeksizin stil değişiklikleri yapmamıza olanak tanımasıdır. Örneğin, bir liste elemanının sadece ilk öğesini stilize etmek istediğimizde, bu elemana özel bir sınıf eklememize gerek kalmadan :first-child sözde sınıfını kullanarak hızlıca stil uygulayabiliriz.

Özetle, sözde sınıflar, bir elemente özgü özel bir durumu tanımlamak için kullanılır ve sahip olduğu syntax (söz dizimi) aşağıdaki gibidir:

Fark edileceği üzere, sözde sınıfları kullanarak stil vereceğimiz zaman elemanın adından sonra iki nokta üst üste işareti (:) koyarak tanımlarız. Yaygın olarak kullanılanları ise aşağıda listelenmiştir:

1. :hover: Elemanın üzerine gelindiğinde uygulanan stil için kullanılır. Özellikle bağlantılar için sıkça kullanılır.
2. :active: Elemanın aktif (tıklanıyor) olduğu durum için kullanılır.
3. :focus: Elemanın odaklandığı (örn. bir form alanına tıklanıldığında) durum için kullanılır.
4. :visited: Kullanıcının daha önce ziyaret ettiği bir bağlantı için stil uygulamak için kullanılır.
5. :first-child: Ebeveyninin ilk çocuğu olan elemanları seçer.
6. :last-child: Ebeveyninin son çocuğu olan elemanları seçer.
7. :nth-child(n): Ebeveyninin n numaralı çocuğu olan elemanları seçer.
8. :not(selector): Belirtilen seçiciye uymayan elemanları seçer.
9. :disabled: Etkin olmayan form elemanları için stil uygulamak için kullanılır.

Örnek olarak, bir bağlantının üzerine gelindiğinde renginin değişmesini istediğimizde şu şekilde bir sözde sınıf uygulayabiliriz: