:nth-child ve :nth-of-type
Ögeleri, nth formüllerini ve tür seçicilerini kullanarak bir üst ögedeki konumlarına göre seçin.
:nth-child ve :nth-of-type, CoddyKit'te ücretsiz bir CSS Academy dersidir. Bu, 4 dersinin 2. 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.
Yapısal Sözde Sınıflar Nedir?
Yapısal sözde sınıflar, öğeleri üst öğeleri içindeki konumlarına göre seçer. Belirli alt öğeleri hedeflemek için sınıf veya JavaScript ekleme gereksinimini ortadan kaldırır.
:first-child ve :last-child
Bir üst öğenin ilk veya son alt öğesini seçin:
<ul><li>First item (no top border)</li><li>Middle item</li><li>Last item (no bottom margin)</li></ul>
:nth-child() Temelleri
:nth-child(n), her türden kardeş öğe arasındaki konumlarına göre öğeleri seçer; sayım 1'den başlar.
<ul><li>Item one</li><li>Item two</li><li>Item three</li></ul>
:nth-child() Anahtar Sözcüklerle
Sıraların dönüşümlü biçimlendirilmesi için odd veya even anahtar sözcüğünü kullanın:
<table><tr><td>Row 1</td></tr><tr><td>Row 2</td></tr><tr><td>Row 3</td></tr><tr><td>Row 4</td></tr></table>
:nth-child() Formüllerle
A adım, B ise ofset olacak şekilde An+B formülünü kullanın. n değeri 0'dan başlar ve artar.
3n— her üçüncü öğe (3, 6, 9...)3n+1— her üç öğeden ilki (1, 4, 7...)-n+3— yalnızca ilk üç öğe
<ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li></ul>
:nth-of-type()
:nth-of-type(), diğerlerini yok sayarak yalnızca aynı öğe türündeki kardeşleri sayar. Öğelerin türleri karışık olduğunda bu önemlidir.
<h2>Heading</h2><p>First paragraph</p><p>Second paragraph (blue)</p><p>Third paragraph</p>
:first-of-type ve :last-of-type
Kardeşler arasındaki belirli etiket türünün ilk veya son öğesini seçin:
<p>Lead paragraph (larger)</p><p>Regular paragraph</p>
<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='60'><rect width='100' height='60' fill='%231e90ff'/></svg>" alt="one" />
<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='60'><rect width='100' height='60' fill='%23ff6347'/></svg>" alt="two" />
:nth-child ve :nth-of-type karşılaştırması
Temel fark:
p:nth-child(2)— ikinci alt öğeyi seçer; IF bu öğe bir<p>isep:nth-of-type(2)— diğer öğelerden bağımsız olarak ikinci<p>öğesini seçer
:only-child ve :only-of-type
:only-child, üst öğesinin tek alt öğesi olan bir öğeyi seçer. :only-of-type, üst öğesindeki türünün tek örneği olan bir öğeyi seçer.
<div><p>I'm the only child in this div.</p></div>
:nth-child ile of S Seçicisi (Modern)
Modern CSS, :nth-child(An+B of selector) kullanarak nth formülünün hangi öğeleri sayacağını filtrelemenize olanak tanır:
<ul><li class="featured">Featured 1</li><li>Regular</li><li class="featured">Featured 2 (gold)</li><li class="featured">Featured 3</li></ul>
Pratik: Son Satırdaki Izgara Boşluğu
Görünür olan son öğenin alt kenar boşluğunu kaldırın:
<div class="grid"><div class="grid-item">1</div><div class="grid-item">2</div><div class="grid-item">3</div><div class="grid-item">4</div><div class="grid-item">5</div><div class="grid-item">6</div></div>
Hızlı Kontrol
İlk öğeden başlayarak listedeki her üçüncü öğeyi hangi seçici hedefler?
Özet
:nth-child(), tüm kardeşleri konumlarına göre sayar; :nth-of-type() ise yalnızca aynı etikete sahip kardeşleri sayar. Çizgili tablolar için odd/even kullanın. An+B formülü, sınıf eklemeden her üçüncü veya ilk beş öğe gibi güçlü örüntüler oluşturmanızı sağlar.
Sıkça Sorulan Sorular
“:nth-child ve :nth-of-type” dersi ücretsiz mi?
Evet — “:nth-child ve :nth-of-type” 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.
“:nth-child ve :nth-of-type” dersinde ne öğreneceğim?
Ögeleri, nth formüllerini ve tür seçicilerini kullanarak bir üst ögedeki konumlarına göre seçin. 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 2. dersidir.
“:nth-child ve :nth-of-type” 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ı