Hoşgeldiniz
Okuma Moduna Geç
14 Nisan 2018 - 00:28
CSS :nth-child Kullanım Yöntemleri

Nedir?

nth-child herhangi bir div içerisinde aynı div adına veya etiket adına sahip nesnelerden istediklerini seçmenize olanak sağlayan css selektörüdür.

HTML dosyamızda böyle bir yapımız olduğunu varsayalım.

<div class="mert">1</div>
<div class="mert">2</div>
<div class="mert">3</div>
<div class="mert">4</div>
<div class="mert">5</div>
<div class="mert">6</div>
<div class="mert">7</div>
<div class="mert">8</div>

Yapımızda toplam 8 div var ve gördüğünüz gibi ilk divimiz 0'dan değil 1'den başlamaktadır.


Örneklerimizde kullanacağımız listemizin şöyle olduğunu varsayıyorum:

Baştan 4. Element

Doğrudan istenen elementin seçimini yapmak için direkt olarak değeri girmemiz yeterlidir.

.mert:nth-child(4){
	background: red;
}

Tüm Elementler

Mantıken n bize tüm diziyi veriyor. Örneğimiz için n=8. Bu durumda biz eğer n yazarsak tüm öğeleri seçebiliriz.

.mert:nth-child(n){
	background: red;
}

İlk 4 Element

Tüm elementleri n ile seçebiliyoruz. Öyleyse -n ifadesine ne kadar eklersek baştan o kadar seçmeyi başaracağız. Örneğin -n ifadesi bizi 0'a götüreceği için -n+4 ifadesi ilk 4 elementi seçmemizi sağlayacaktır.

.mert:nth-child(-n+4){
	background: red;
}

Çift Elementler

Sıra ile 2,4,6,8... şeklinde elementleri seçip işaretleyebiliriz.

.mert:nth-child(even){
	background: red;
}

Tek Elementler

Sıra ile 1,3,5,7... şeklinde elementleri seçip işaretleyebiliriz.

.mert:nth-child(odd){
	background: red;
}

Her 3. Element

n ifadesinin başına bir katsayı atayarak o katsayıdakileri işaretleyebiliriz.

.mert:nth-child(3n){
	background: red;
}

Formülize Element Seçimi

n ifadesini kullanarak istediğimiz bir kuralı oluşturup işaretleyebiliriz. Örneğin her 3. elementi seçeriz ama bunun 1. elementten başlamasını istersek 3n+1 ifadesi işimize yarayacaktır.
3n+1 için:
- 3.0 + 1 = 1
- 3.1 + 1 = 4
- 3.2 + 1 = 7
...

.mert:nth-child(3n+1){
	background: red;
}

Ortadaki 4 Element

Burada mantıken 2 farklı selektör kullanmak zorundayız.
- nth-child(n+3): Bize 3,4,5,6,7 ve 8'i verir.
- nth-child(-n+6): Bize 1,2,3,4,5 ve 6'yı verir.
Formülümüzde ikisininin ortak elemenları seçilir. Bu da bize 3,4,5 ve 6'yı, yani ortadaki 4 elemanımızı işaretleme olanağı verir.

.mert:nth-child(n+3):nth-child(-n+6){
	background: red;
}
Sponsorlu Bağlantı
Yorumlar
Aslan
20 Nisan 201814:30
Reis css-nth-child-kullanimi konusunu daha iyi anlamam icin mail atmistim cevap yazmissin, tekrar cok tesekkur ederim gonderdigin ornek icin. Sevgiler sunarim
132
Cevapla
1
Yorumu Beğen
0
Yorumu Beğenme
Mert Topuz
21 Nisan 201801:43
Rica ederim, konuyu kavramana yardımcı olduysa ne mutlu bana :) İyi çalışmalar dilerim
0
Yorumu Beğen
0
Yorumu Beğenme
Bir Yorum da Sen Bırak
Adınız ve Soyadınız
Mail Adresiniz
Mail adresinizi yalnızca yönetici görüntüleyebilir.
Web Siteniz
Yorumunuz
Yorumu Gönder