:where ve :has

:where ve :has sözde sınıflarını öğrenirsin.

:where sözde sınıfı

:where() işlevi, içine yazdığın seçici listesini gruplar; tek bir seçici gibi davranır. En önemli özelliği öncelik katkısı sıfır olmasıdır.

:where(h1, h2, h3) { color: navy; } yazarsan, üç başlık da navy olur; ama öncelik sıfır olduğu için herhangi bir sınıf seçici bu değeri kolayca geçersiz kılar. Tema iskeletinde güvenli bir taban için idealdir.

:has sözde sınıfı

:has() işlevi bir öğenin içeriğine bakar. İçine yazdığın seçiciye uyan bir alt öğesi varsa, hedef öğeyi eşleştirir. Bu yüzden ebeveyn seçici olarak da bilinir.

a:has(> img) yazarsan, içinde doğrudan bir görsel taşıyan tüm a etiketlerini seçersin. Önceden yalnızca JavaScript ile yapılan bu denetim artık tek satır CSS'te. Bu, görsel bağlantılarına özel stil vermek için birebirdir.

Gerçek kullanım: kart ebeveyn

:has'in gücü, içeriğe göre ebeveyni biçimlemekte yatar. Bir kart içinde görsel varsa kenarlık ekle, yoksa ekleme — tek satırda halledilir.

.card:has(img) { padding: 0; } yazarsan, içinde görsel taşıyan kartların iç boşluğu sıfırlanır; görsel kartın kenarlarına kadar uzanır. Bu davranış önceden yalnızca JavaScript ile mümkündü.

Uygulama Görsel bağlantılarını blok yap

Bir a:has(> img) seçicisi yaz ve içine display: block bildirimi ekle. Böylece içinde doğrudan görsel taşıyan bağlantılar blok öğesine dönüşür.

Örnek çözümü göster

/* görsel bağlantılarını düzenle */
a:has(> img) {
  display: block;
}

Kendini test et

h1'in rengi ne olur?
```
:where(h1, h2) {
  color: navy;
}
h1 {
  color: red;
}
```
- red — h1 seçicisi kazanır
- navy — :where geçerli olur
- Tarayıcı hata verir
- Renk değişmez
Cevabı göster

red — h1 seçicisi kazanır — Doğru. :where öncelik katkısı sıfırdır; h1 seçicisi daha yüksek öncelikle yener.

Görsel içeren bağlantıyı seç

a____ {
  display: block;
}

Cevabı göster

a:has(img) {
  display: block;
}

Sözde sınıfı görevine eşle

:where(h1, h2)

Öncelik sıfır gruplama
:has(> img)

Görsel taşıyan ebeveyn
:where(.btn)

Kolayca geçersiz kılınan taban
:has(.badge)

Rozet taşıyan öğe

Sıradaki ders: Özet - Breadcrumb menü

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler