📖 Seçiciler (Selectors)
:has() Ebeveyn Seçici (Parent Selector)
CSS'in en devrimsel seçicisidir. Belirli bir alt öğeye veya duruma sahip olan ebeveyn öğeleri doğrudan stillendirir.
⚡ Sözdizimi (Syntax)
element:has(selector) { ... }
🛠️ Pratik Kullanım Örnekleri
📌 İçinde Resim Olan Kartların Kenar Boşluğunu Sıfırlama
.card:has(img) {
padding-top: 0;
}
📌 İçindeki Checkbox İşaretli Olan Form Satırını Vurgulama
.form-row:has(input:checked) {
background-color: rgba(56, 189, 248, 0.1);
border-color: #38bdf8;
}
💡
Mühendislik İpucu & En İyi Pratik:
Eskiden yalnızca JavaScript ile yapılabilen ebeveyn stil manipülasyonlarını artık saf CSS ile yapabilirsiniz.
İlgili Kılavuzlar
display: flex (Esnek Kutu Düzeni - Flexbox)
display: grid (İki Boyutlu CSS Izgara Düzeni)
position: sticky (Kaydırmaya Bağlı Sabitlenen Başlıklar)
backdrop-filter (Buzlu Cam & Glassmorphism Efekti)
clamp() (Akıcı Tipografi ve Dinamik Boyutlandırma)
:has() Ebeveyn Seçici (Parent Selector)
aspect-ratio (En-Boy Oranı Kilitleme)