:not() :is() ve :where()
:not() ile ögeleri hariç tutun, :is() ile listedeki herhangi biriyle eşleştirin ve düşük özgüllük için :where() kullanın.
:not() :is() ve :where(), CoddyKit'te ücretsiz bir CSS Academy dersidir. Bu, 4 dersinin 3. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, CSS Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. CSS Academy kursu toplamda 4 dersten oluşur.
:not() Sözde Sınıfı
:not(selector), verilen seçiciyle eşleşmeyen öğeleri seçer. Seçimi tersine çevirir.
<input type="text" placeholder="Text input (styled)" />
<input type="submit" value="Submit (unstyled)" />
:not() Birden Çok Bağımsız Değerle
Modern CSS, :not() içinde birden çok bağımsız değere izin verir — listelenen seçicilerin hiçbiriyle eşleşmeyen öğeleri seçer:
<a href="#">Normal link</a> <a href="#" class="active">Active link</a> <a href="#" class="disabled">Disabled link</a>
:not() Özgüllüğü
:not() özgüllüğü, en özgül bağımsız değerinin özgüllüğüdür. :not(.active) sınıf düzeyinde özgüllüğe sahiptir (0,1,0).
:is() Sözde Sınıfı
:is(), bir seçici listesindeki seçicilerden herhangi biriyle eşleşen tüm öğeleri seçer. Gruplandırmayı basitleştirir ve tekrarı azaltır.
<header><h1>Site Title</h1><h2>Subtitle</h2><h3>Tagline</h3></header>
:is() Özgüllüğü
:is(), en özgül bağımsız değerinin özgüllüğünü alır. Liste bir ID seçicisi içeriyorsa, kuralın tamamı ID özgüllüğüne sahip olur.
<div id="header"><h2>Header H2 (crimson via ID)</h2></div>
<div class="card"><h2>Card H2 (crimson via class)</h2></div>
:is() Hoşgörülü Ayrıştırma
:is(), hoşgörülü seçici ayrıştırma kullanır: listedeki herhangi bir seçici geçersizse sessizce yok sayılır ve diğerleri uygulanmaya devam eder. Normal, virgülle ayrılmış seçicilerden biri geçersiz olduğunda tümü başarısız olur.
:where() Sözde Sınıfı
:where(), sıfır özgüllüğe sahip olması dışında :is() ile tamamen aynı şekilde çalışır. Kolayca geçersiz kılınması gereken yardımcı sınıflar ve sıfırlama stilleri için tasarlanmıştır.
<h1>No top margin</h1><h2>No top margin</h2><h3>No top margin</h3>
Sıfırlamalar için :where()
:where(), özgüllük yarışlarını asla kazanmaması gereken CSS sıfırlamaları ve temel stiller için idealdir:
<ul><li>Item A</li><li>Item B</li></ul>
<ol><li>Step 1</li><li>Step 2</li></ol>
Özgüllük Karşılaştırması
Özgüllük davranışının özeti:
:is()— bağımsız değerler arasındaki en yüksek özgüllük:where()— her zaman sıfır özgüllük:not()— bağımsız değerler arasındaki en yüksek özgüllük
:is() ve :not() Zincirleme
Kesin ve okunabilir seçiciler için bunları birleştirin:
<nav class="nav"><a href="#">Link</a> <button>Button</button> <a href="#" class="disabled">Disabled Link</a></nav>
Tarayıcı Desteği
:is() ve :where() tüm modern tarayıcılarda desteklenir. Birden çok bağımsız değer içeren :not() modern tarayıcılarda desteklenir. IE11 desteği gerektiren projelerde bunları kullanmaktan kaçının.
Hızlı Kontrol
Bağımsız değerlerinden bağımsız olarak sıfır özgüllüğe sahip olan sözde sınıf hangisidir?
Özet
:not() seçimi tersine çevirir ve birden çok bağımsız değeri kabul eder. :is(), bir listedeki seçicilerden herhangi biriyle eşleşir ve o listedeki en yüksek özgüllüğü alır. :where() de aynı şekilde çalışır; ancak sıfır özgüllüğe sahiptir ve sıfırlamalar için idealdir. Üçü de hoşgörülü ayrıştırma kullanarak geçersiz seçicileri sessizce yok sayar.
Sıkça Sorulan Sorular
“:not() :is() ve :where()” dersi ücretsiz mi?
Evet — “:not() :is() ve :where()” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve CSS Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. CSS Academy kursu toplamda 4 dersten oluşur.
“:not() :is() ve :where()” dersinde ne öğreneceğim?
:not() ile ögeleri hariç tutun, :is() ile listedeki herhangi biriyle eşleştirin ve düşük özgüllük için :where() kullanın. CSS Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
CSS Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te CSS Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 3. dersidir.
“:not() :is() ve :where()” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu CSS Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her CSS Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- :hover :focus :active ve :visited
- :nth-child ve :nth-of-type
- :not() :is() ve :where()
- :checked :disabled ve Form Durumu Sözde Sınıfları