:has() İlişkisel Sözde Sınıfı

:has() sözde sınıfı, bağımsız değişkenle eşleşen bir alt öğe içeriyorsa bir öğeyi seçer. Genellikle "üst seçici" olarak adlandırılır ve CSS'nin daha önce sahip olmadığı, alt öğelerine göre bir üst öğeyi biçimlendirme olanağını sağlar.

.card:has(img), img alt öğesi içeren herhangi bir .card öğesini seçer. Bağımsız değişken, konu öğesine göre öğeleri açıklayan geçerli CSS seçicilerinden oluşan göreli bir seçici listesidir.

Geçersiz bir girdi içerdiğinde form kapsayıcısını biçimlendirin: form:has(:invalid) { border-color: red; }. Bir başlık içeren bölümü biçimlendirin: section:has(h2) { padding-top: 2rem; }. Üst öğe, alt öğenin durumuna göre görünümünü değiştirir.

:has(), + ve ~ birleştiricilerinin yapamadığı bir şeyi, önceki kardeşleri seçmeyi mümkün kılar. h2:has(+ p), hemen ardından p gelen h2 öğelerini seçer. li:has(~ .active), kendisinden sonra gelen bir .active kardeş öğeye sahip li öğelerini seçer.

JavaScript olmadan yerel form geçerliliğine tepki verin: input:has(~ .error-msg), kardeş hata iletisine sahip bir girdiyi biçimlendirir. label:has(+ input:required), eşleştirilmiş girdisi zorunlu olan etiketleri biçimlendirir; bunların tümü yalnızca CSS ile yapılır.

Etkin alt öğeye göre gezinme kapsayıcılarını vurgulayın: nav:has(.active), herhangi bir alt öğe etkin sınıfa sahip olduğunda tüm nav öğesine stiller uygular. Bu, hangi gezinme bölümünün geçerli olduğunu kapsayıcı düzeyinde belirtmek için kullanışlıdır.

.grid:has(.card:focus-within), herhangi bir kart klavye odağı aldığında tüm ızgarayı biçimlendirir. .dropdown:has(:hover), herhangi bir alt öğenin üzerine gelindiği sürece açılır menüyü açık tutar; bu, karmaşık kardeş birleştiricisi zincirlerinden daha temizdir.

.sidebar:has(nav), .sidebar:not(:has(nav)) ifadesinden farklı bir düzen uygular. JavaScript olmadan koşullu düzen: belirli alt öğelerin varlığı veya yokluğu, üst öğenin düzenini yönlendirir ve gerçekten uyarlanabilir, içerik farkındalığına sahip CSS sağlar.

Geniş kapsamlı bağımsız değişken seçicileri içeren :has() ifadeleri (örneğin :has(*)) maliyetli olabilir; tarayıcının her öğeyi denetlemesi gerekir. :has() bağımsız değişkenlerini belirli tutun. Mümkün olduğunda :has(> .specific-child) (doğrudan alt öğe) ifadesini, :has(.specific-child) (herhangi bir alt öğe) ifadesine tercih edin.

:has(), Chrome 105+, Safari 15.4+ ve Firefox 121+ sürümlerinde desteklenir. Tam temel desteğe 2023'ün sonlarından beri sahiptir. Bir çoklu dolgusu yoktur (bunu benzetmek için JavaScript gerekir); özelliğin kritik olmadığı eski tarayıcılarda aşamalı geliştirmeyle birlikte kullanın.

Daha önce JS olay dinleyicileri gerektiren kalıplar: "alt öğe odaklandığında üst öğeye sınıf ekleme", "modal-trigger mevcut olduğunda kaplama gösterme", "tam olarak üç öğeye sahip olduğunda ızgarayı farklı biçimlendirme." :has(), bunların tümünü bildirimsel olarak ele alır.

:has(), + ve ~ gibi mevcut CSS birleştiricileriyle karşılaştırıldığında onu benzersiz kılan nedir?

:has(), üst öğe ve önceki kardeş seçimini mümkün kılan CSS'deki ilk gerçek ilişkisel sözde sınıftır. İçerik odaklı biçimlendirmeyi, form durumu tepkilerini, gezinme vurgulamasını ve daha önce JavaScript DOM işlemleri gerektiren birçok kalıbı destekler; üstelik tümü CSS içinde bildirimsel olarak yapılır.