Pseudo-class’lar, HTML öğelerinin belirli bir durumunu, konumunu veya kullanıcı etkileşimini hedeflemek için kullanılan özel CSS seçicileridir. Elemanlara ekstra class eklemeden dinamik stil uygulamayı sağlarlar.

1. :active

Tanım: Bir öğe tıklandığı anda (mouse basılıyken) uygulanır.
Kullanım Amacı: Butonlara basılma efekti vermek, kullanıcıya anlık geri bildirim sağlamak.

Örnek:

button:active {
  transform: scale(0.98);
}

Profesyonel İpucu:
:hover → :focus → :active sıralaması CSS yazımında önemlidir. Linklerde stil çakışmalarını önlemek için bu sıraya dikkat edilmelidir.

2. :visited

Tanım: Daha önce ziyaret edilmiş linkleri hedefler.
Kullanım Amacı: Kullanıcı deneyimini iyileştirmek için ziyaret edilmiş bağlantıları görsel olarak ayırmak.

Örnek:

a:visited {
  color: purple;
}

Not: Güvenlik nedeniyle :visited ile yalnızca sınırlı CSS özellikleri değiştirilebilir (örneğin color).

3. :hover

Tanım: Fare imleci öğenin üzerine geldiğinde uygulanır.
Kullanım Amacı: Hover efektleri, animasyonlar ve etkileşimli tasarımlar.

Örnek:

.card:hover {
  box-shadow: 0 8px 20px rgba(0,0,0,0.2);
}

UX Tavsiyesi:
Hover efektleri mobil cihazlarda çalışmayabileceği için alternatif etkileşim çözümleri düşünülmelidir.

4. :focus

Tanım: Bir öğe (genellikle input) odaklandığında uygulanır.
Kullanım Amacı: Form alanlarında aktif giriş alanını vurgulamak.

Örnek:

input:focus {
  border-color: #007bff;
  outline: none;
}

Erişilebilirlik Notu:
:focus stillerini tamamen kaldırmak yerine özelleştirmek daha doğru bir yaklaşımdır.

5. :checked

Tanım: İşaretlenmiş checkbox veya radio butonları hedefler.
Kullanım Amacı: Özel toggle, switch veya filtre tasarımları.

Örnek:

input[type="checkbox"]:checked {
  accent-color: green;
}

6. :disabled

Tanım: Devre dışı bırakılmış form elemanlarını hedefler.
Kullanım Amacı: Kullanıcıya pasif öğeleri görsel olarak belirtmek.

Örnek:

button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

7. :first-child

Tanım: Bir kapsayıcı içindeki ilk çocuğu seçer.
Kullanım Amacı: Liste veya tablo yapılarında ilk elemanı özel biçimlendirmek.

Örnek:

li:first-child {
  font-weight: bold;
}

8. :last-child

Tanım: Bir kapsayıcı içindeki son çocuğu seçer.
Kullanım Amacı: Listenin son öğesine özel stil vermek.

Örnek:

li:last-child {
  border-bottom: none;
}

9. :nth-child(n)

Tanım: Belirli sıradaki veya tekrar eden elemanları seçer.
Kullanım Amacı: Zebra table tasarımı, grid sistemleri, tekrar eden desenler.

Örnek:

tr:nth-child(even) {
  background-color: #f2f2f2;
}

Gelişmiş Kullanım:

li:nth-child(3n+1) {
  color: red;
}

10. :not(selector)

Tanım: Belirtilen seçici dışındaki elemanları hedefler.
Kullanım Amacı: Belirli öğeleri hariç tutarak daha temiz ve güçlü seçici yazımı.

Örnek:

div:not(.active) {
  opacity: 0.7;
}

11. :link

Tanım: Henüz ziyaret edilmemiş linkleri hedefler.
Kullanım Amacı: Varsayılan link stillerini özelleştirmek.

Örnek:

a:link {
  color: blue;
}

Profesyonel Geliştirici Perspektifi

🎯 Neden Pseudo-Class Kullanmalıyız?

• HTML’e gereksiz class eklemeyi azaltır.
• Daha temiz ve semantik kod yazımı sağlar.
• Kullanıcı etkileşimlerini CSS seviyesinde yönetir.
• JavaScript ihtiyacını bazı durumlarda ortadan kaldırır.

En İyi Uygulama Önerileri

1. Erişilebilirliği önceliklendirin → :focus stillerini kaldırmayın.
2. Mobil uyumu düşünün → :hover bağımlılığı azaltın.
3. Seçici karmaşıklığını artırmayın → Performans için gereksiz derin seçicilerden kaçının.
4. Durum sıralamasına dikkat edin → Link stillerinde LVHA (Link, Visited, Hover, Active) sırasını uygulayın.

Sonuç

CSS pseudo-class’lar, modern web geliştirmede kullanıcı deneyimini iyileştirmek ve etkileşimli arayüzler oluşturmak için vazgeçilmez araçlardır. Doğru kullanıldığında daha temiz, daha sürdürülebilir ve daha performanslı frontend projeleri geliştirmenizi sağlar.