: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