:has() Bir Ebeveyn Seçici Değildir. JavaScript'i Siler.

Kodunuzda classList.toggle ifadesini aratın.

Muhtemelen aynı kalıbın birçok örneğini bulacaksınız. Bir kullanıcı bir onay kutusuna tıklar veya bir alana odaklanır. Siz de bir ebeveyn öğe üzerindeki sınıfı değiştirmek (toggle) için JavaScript kullanırsınız. Bu, CSS'in ebeveyni biçimlendirmesine olanak tanır.

Bu kodun çoğunu silebilirsiniz.

İnsanlar :has() seçicisine "ebeveyn seçici" diyor. Bu tanımlama yanlıştır. :has() bir koşulu test eder. Bir stilin uygulanıp uygulanmayacağına karar vermek için bir öğenin içeriğine bakar.

Şunları kontrol edebilir:

  • Bir alt öğe (descendant)
  • Belirli bir kardeş öğe (sibling)
  • Öğelerin sayısı
  • Bir öğenin yokluğu

İşte bazı örnekler:

• Eğer bir kart resim içeriyorsa onu biçimlendirin: .card:has(img) { ... }

• Bir onay kutusu işaretlendiğinde bir satırı biçimlendirin: .option-row:has(input:checked) { background: var(--selected-bg); }

• Öğelerin sayısına göre bir ızgara (grid) düzenini değiştirin: .grid:has(> :nth-child(4)) { grid-template-columns: repeat(4, 1fr); }

Son örnek, saf CSS kullanarak bir düzeni değiştirir. DOM'un canlı durumunu okur.

Eskiden, bir haberci görevi görmesi için JavaScript'e ihtiyacınız vardı. Bir alt öğe, bir üst öğe (ancestor) üzerindeki stilleri tetikleyemezdi. Bir sınıfı ağaç yapısında yukarı taşımak için bir dinleyici (listener) yazmanız gerekiyordu.

Artık haberciye gerek yok.

Eğer :has() kullanırsanız, stilleriniz her zaman doğru olur. İlk render (oluşturma) anında çalışırlar. Kullanıcı tarayıcısında geri gittiğinde de çalışırlar. Durum değişikliği ile stil değişikliği arasında herhangi bir gecikme olmaz.

Şunlar için kullanın:

  • Form doğrulama
  • Listelerdeki boş durumlar
  • Açılıp kapanabilir paneller

:has() kullanımının bir maliyeti olduğunu unutmayın. Tarayıcı, içteki seçiciyi alt öğelere göre değerlendirmek zorundadır. Doğrulama veya açma/kapama gibi çoğu kullanıcı arayüzü (UI) görevi için bir fark hissetmeyeceksiniz.

Kaydırma (scroll) konumları veya binlerce hover (üzerine gelme) durumu gibi yüksek frekanslı değişiklikler için kullanmaktan kaçının.

Sadece bir alt öğeden stil yönetmek için sınıfları değiştirmeyi (toggle) bırakın. Bunun yerine :has()'in bu koşulu ifade edip edemeyeceğini sorun. CSS'iniz küçülecek ve JavaScript'iniz ortadan kalkacaktır.

:has(); Chrome, Firefox, Safari ve Edge'de çalışır.

Kaynak: https://dev.to/parsajiravand/has-isnt-a-parent-selector-it-deletes-javascript-4hej