:not ve :is
:not ve :is sözde sınıflarını öğrenirsin.
:not() nedir?
:not() sözde sınıfı, parantez içindeki seçiciye uymayan öğeleri yakalar. Bir dışlama filtresidir.
Örneğin li:not(.active), sınıfı active olmayan tüm liste öğelerini seçer. Böylece yalnızca etkin olmayan öğelere soluk bir renk verip etkin öğeyi olduğu gibi bırakabilirsin.
İçeriye yalnızca tek bir seçici yaz; virgülle liste olmaz.
:is() ile seçici gruplama
:is() sözde sınıfı, parantez içindeki seçicilerden herhangi birine uyan öğeleri yakalar. Virgülle ayrılmış bir liste alır.
Örneğin :is(h1, h2, h3) { font-family: Georgia, serif; } tek bir bildirimle üç başlık düzeyini de aynı aileyi kullanmaya zorlar. h1, h2, h3 yazmaya göre daha kısa ve iç içe kullanılabilir.
Modern tarayıcıların tümünde desteklenir.
:is() kısaltma ve öncelik
:is(), yinelenen yazımı kısaltır. section h1, section h2, section h3 yerine section :is(h1, h2, h3) yazarsın; anlamı aynıdır.
Bir önemli ayrıntı: :is()'in önceliği (specificity) parantez içindeki en güçlü seçicinin önceliğini alır. :where() ise her zaman sıfır öncelik verir; bu yüzden üzerine yazması kolaydır.
Uygulama Öne çıkmayan liste öğelerini solukla
Bir li:not(.featured) seçicisi yaz ve içine color: #888 ekle. Böylece yalnızca sınıfı featured olmayan liste öğeleri gri tonunda görünür; öne çıkanlar olduğu gibi kalır.
Örnek çözümü göster
/* öne çıkmayan öğeleri solukla */
li:not(.featured) {
color: #888;
}Kendini test et
-
li:not(.active) hangi öğeleri eşleştirir?
li:not(.active) { color: #888; }- Sınıfı active olmayan tüm liste öğeleri
- Yalnızca sınıfı active olan öğeler
- Hiçbir öğe, geçersiz sözde sınıf
- Listenin ilk öğesi
Cevabı göster
Sınıfı active olmayan tüm liste öğeleri — Doğru. :not(.active) sınıfı active olmayanları yakalar.
-
Üç başlık düzeyini gruplayan sözde sınıfı yaz
____ { font-family: Georgia, serif; }Cevabı göster
:is(h1, h2, h3) { font-family: Georgia, serif; } -
Sözde sınıfı göreviyle eşleştir
- :not(.x)
- Sınıfı x olmayanlar
- :is(h1, h2)
- h1 ya da h2
- :hover
- Fare üzerinde
- :nth-child(2)
- İkinci kardeş