CSS :has() Selector: "Ebeveyn Selector" Nihayet Geldi, Nasıl Kullanılır?

Merhaba,

CSS dünyasında uzun süredir beklenen bir özellik sonunda tüm modern tarayıcılarda kullanılabilir hale geldi: :has() pseudo-class. Bu selector'ü ilk öğrendiğimde neden bu kadar geç geldiğini düşünmeden edemedim :)

:has() Nedir?

:has() selector'ü bir elementin içinde belirli bir şey varsa o elementi seçmenizi sağlıyor. Buna "relational pseudo-class" deniyor ama en bilinen adıyla "ebeveyn selector" olarak geçiyor. CSS tarihinin en çok istenen özelliklerinden biriydi.

Örnek vermek gerekirse:

/* İçinde img olan her article'ı seç */
article:has(img) {
  display: grid;
  grid-template-columns: 1fr 2fr;
}

/* İçinde hata mesajı olan form'u seç */
form:has(.error) {
  border: 2px solid red;
}

Neden Bu Kadar Önemliydi?

Daha önce JavaScript ile yapmak zorunda kaldığımız şeyleri artık saf CSS ile yapabiliyoruz. Diyelim ki bir liste elemanının içinde checkbox işaretliyse o liste elemanını farklı göstermek istiyordunuz — eskiden JS event listener yazmanız gerekiyordu. Şimdi:

li:has(input:checked) {
  background: #e8f5e9;
  text-decoration: line-through;
  opacity: 0.6;
}

İşte bu kadar. Saf CSS ile yapılıyor arkadaşlar. Performans açısından da JavaScript alternatifinden çok daha iyi.

Pratik Kullanım Örnekleri

Gerçek projede kullandığım birkaç örnek paylaşayım:

• Navigasyon menüsünde açık submenu varsa ana menü elemanını vurgulama
• Boş olmayan input alanlarının label'ını farklı gösterme
• Resim içeren kartları resim içermeyenlerden farklı layout'ta gösterme
• Dark mode toggle'ı body'de :has() ile yönetme

Tarayıcı Desteği

2024 itibarıyla Chrome, Firefox, Safari ve Edge'in güncel sürümlerinde tam destek mevcut. Türkiye'deki kullanıcı kitlenizi düşündüğünüzde neredeyse tamamı modern tarayıcı kullandığından çekinmeden kullanabilirsiniz. Yine de projeniz IE desteği gerektiriyorsa (Allah korusun :)) bekleyin.

SCSS'e İhtiyaç Azalıyor mu?

:has() ile birlikte CSS Nesting ve CSS Subgrid de gelince artık SCSS olmadan çok şeyi yapabiliyoruz. Ama SCSS'in değişkenler, mixin ve extend gibi özellikleri hâlâ değerli. Tamamen geçmek için henüz erken ama vanilla CSS'in gücü her geçen gün artıyor.

İyi Günler Dilerim.