:nth-child seçicisi, belirli bir öğenin ebeveyni içindeki belirli sıradaki çocuklarını seçmek için kullanılan bir CSS seçicisidir. Bu seçici, özellikle liste öğeleri gibi belirli bir düzen içinde bulunan öğeleri hedeflemek için kullanışlıdır.
:nth-child Selector Kullanım Örnekleri:
Belirli bir sıradaki öğeleri seçme:
ul li:nth-child(4) {
background-color:grey;
}- Öğe 1
- Öğe 2
- Öğe 3
- Öğe 4
Bu kod, liste içerisinde ki 4.öğenin arka plan rengini gri yapar.
Belirlenen sıradaki her öğeyi seçme:
ul li:nth-child(2n) {
color:red;
}- Öğe 1
- Öğe 2
- Öğe 3
- Öğe 4
Bu kod, her bir liste öğesinin (li elementi), ebeveyni içindeki ikinci öğe olduğunda (yani, her iki öğeden biri) metin rengini kırmızı yapar.
Tek Sayıdaki Öğeleri Seçme (odd):
ul li:nth-child(odd) {
font-weight: bold;
}- Öğe 1
- Öğe 2
- Öğe 3
- Öğe 4
- Öğe 5
- Öğe 6
- Öğe 7
Bu kod, her bir liste öğesinin ebeveyni içindeki tek sıradaki öğeleri (1, 3, 5, vb.) kalın yapar.
Çift Sayıdaki Öğeleri Seçme (even):
ul li:nth-child(even) {
font-weight: bold;
}- Öğe 1
- Öğe 2
- Öğe 3
- Öğe 4
- Öğe 5
- Öğe 6
- Öğe 7
Bu kod, her bir liste öğesinin ebeveyni içindeki çift sıradaki öğeleri (2, 4, 6, vb.) kalın yapar.
Belirli Bir Sayıdan Sonrasını Seçme:
ul li:nth-child(n+3) {
color: green;
}- Öğe 1
- Öğe 2
- Öğe 3
- Öğe 4
- Öğe 5
- Öğe 6
- Öğe 7
Bu kod, belirlenen sayı sonrasında kalan öğelerin yazı rengini yeşil yapar.
CSS'de :nth-child Selector Kullanımı