CSS :has() seçicisi ne işe yarar? Örnek kullanımlar verin.

:has() "içinde şu olan elemanı seç" anlamına gelen ilişkisel bir pseudo-class'tır; uzun süre istenen "parent selector" ihtiyacını karşılar. 2023 sonundan beri tüm modern tarayıcılarda desteklenir.

/* Görseli olan kartlar farklı layout alsın */
.card:has(img) { grid-template-columns: 120px 1fr; }

/* Geçersiz input içeren form alanını kırmızı çerçevele */
.field:has(input:user-invalid) { border-color: crimson; }

/* Checkbox işaretliyse etiketi üstü çizili yap */
label:has(input[type="checkbox"]:checked) { text-decoration: line-through; }

/* Modal açıkken sayfa kaymasın */
body:has(dialog[open]) { overflow: hidden; }

/* Kardeş ilişkisi: başlığın hemen ardından paragraf geliyorsa */
h2:has(+ p) { margin-bottom: 0.25rem; }

Neden önemli?

Eskiden bu tür durumlar için JavaScript ile parent'a class eklemek gerekiyordu. :has() ile durum bağımlı stiller tamamen CSS'te kalır.

Dikkat edilecekler

• Specificity, içindeki en spesifik argümanın specificity'sine eşittir.
• body:has(...) gibi çok geniş seçiciler büyük DOM'larda stil hesaplamasını yavaşlatabilir; mümkün olduğunca dar kapsamlı kullanın.
• Destekleyip desteklemediğini kontrol için: @supports selector(:has(a)) { ... }.

İlgili modern seçiciler: :is() ve :where() (seçici listelerini gruplar, :where specificity'yi 0 yapar), :user-invalid (kullanıcı etkileşiminden sonra geçersiz alan), :focus-visible (klavye odağı).