: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ş

Sıradaki ders: :first-child ve :last-child

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler