:nth-child(n) ve :nth-last-child(n) Nasıl Kullanılır?

Daha önceki yazımızda :first-child ve :last-child‘dan bahsetmiştik ve bu CSS seçicilerinin genellikle tablolarda ve listelerde kullanıldığını söylemiştik. Öncelikle :first-child ve :last-child‘ın nasıl kullanıldığını bilmiyorsanız aşağıdaki bağlantıdan nasıl kullanıldıklarını öğrenmenizde fayda var, zira bu konu devam niteliğinde.

First ve last child’ın nasıl kullanıldığını öğrendiğinize göre :nth-child(n) ve :nth-last-child(n) ile CSS öğrenmeye devam edebiliriz. Bu seçiciler sadece ilk ve son olarak değil, baştan ve sondan başlayarak parantez içerisine yazılan değeri seçer. Yani :nth-child(2) dediğinizde baştan 2. eleman seçilirken, :nth-last-child(2) dediğimizde sonran 2. eleman seçilir. Bir liste örneği ile açıklamak gerekirse;

<ul>
	<li>HTML</li>
	<li>CSS</li>
	<li>JS</li>
	<li>PHP</li>
	<li>jQuery</li>
</ul>

Bu yapıya sahip listenin önizlemesi şu şekilde olur:

  • HTML
  • CSS
  • JS
  • PHP
  • jQuery

5 bileşenden oluşan bu liste için aşağıdaki CSS kodunu çalıştırdığımızda listenin 2. sırasında yer alan CSS bileşeni seçilir ve CSS kodu sadece bu bileşene uygulanarak bileşeni kalınlaştırıp rengini kırmızı yapar.

li:nth-child(2) {
      color: #ff0000;
      font-weight: 700;
}
  • HTML
  • CSS
  • JS
  • PHP
  • jQuery

Aynı işlemi :nth-child(n) yerine aşağıdaki örnekteki gibi :nth-last-child(n) ile yaptığımızda ise sondan 2. bileşeni seçmiş oluyoruz ve sitillendirme işlemi 4. sıradaki PHP bileşenine uygulanmış oluyor.

li:nth-last-child(2) {
      color: #ff0000;
      font-weight: 700;
}
  • HTML
  • CSS
  • JS
  • PHP
  • jQuery

Eğer 2. ya da 4. bileşeni seçmek yerine 3. bileşeni seçmek isteseydik hangi seçiciyi kullandığımızın bir önemi kalmazdı, her iki seçici için de 3 değerini girdiğimizde listenin ortasında 3. bileşen olduğu için o seçilmiş olurdu.

Bu seçiciler aynı zamanda :first-child ve :last-child ile aynı seçme işlemini :nth-child(1) ve :nth-last-child(1) şeklinde yapabiliyor. Ancak ekstra sorgu ile çalıştığı için :first-child ve :last-child’ın yerine kullanılması temiz bir kodlama için oldukça sakıncalı.

Ayrıca hem 2. hemde 4. sıradaki bileşeni seçmek için farklı seçme işlemleri yapmanıza gerek yok. Değer olarak “even” ya da “2n” girmeniz yeterli olacaktır, bu 2,4,6,8 diye devam eden seçme işlemi yapmanızı sağlar. Yani şu şekilde;

li:nth-child(even) {
      color: #ff0000;
      font-weight: 700;
}
  • HTML
  • CSS
  • JS
  • PHP
  • jQuery

Bu kullanımların haricinde farklı değerler ve kombinasyonlar ile seçme işlemi de yapabilirsiniz. Mesela önceki örnekte “even” ve “2n”‘nin çift sayılarda seçme yaptığını söyleyip örneklemiştik, “2n” yerine “3n” yazıldığında ise bu seçme işlemi 3 ve katları olurken, “4n”‘de 4 ve katları, “5n”‘de 5 ve katları olarak devam ediyor. Ayırca ilk 3 ya da son 3 şeklinde seçme işlemi yapmak ta mümkün. Bunun için ise “-n+3” değerini girmek yeterli olacaktır. Her iki seçici ile de uygulanabilen bu kombinasyonda “-” değeri girilmez ise mevcut seçicinin seçme işlemi tersine döner. Bu kombinasyon ile bir örnek yaparak listenin ilk 3 bileşenini seçecek olursak örneğimiz şu şekilde olur;

li:nth-child(-n+3) {
      color: #ff0000;
      font-weight: 700;
}
  • HTML
  • CSS
  • JS
  • PHP
  • jQuery

Şimdi işleri biraz daha karmaşık bir hale getirelim ve aynı anda iki seçiciyi birden kullanalım. Bunun için 5 satır ve 5 sütundan oluşan bir örnek tablo oluşturmak oldukça iyi olacaktır.

<table>
   <tr>
      <td>satır 1, sütun 1</td>
      <td>satır 1, sütun 2</td>
      <td>satır 1, sütun 3</td>
      <td>satır 1, sütun 4</td>
      <td>satır 1, sütun 5</td>
   </tr>
   <tr>
      <td>satır 2, sütun 1</td>
      <td>satır 2, sütun 2</td>
      <td>satır 2, sütun 3</td>
      <td>satır 2, sütun 4</td>
      <td>satır 2, sütun 5</td>
   </tr>
   <tr>
      <td>satır 3, sütun 1</td>
      <td>satır 3, sütun 2</td>
      <td>satır 3, sütun 3</td>
      <td>satır 3, sütun 4</td>
      <td>satır 3, sütun 5</td>
   </tr>
   <tr>
      <td>satır 4, sütun 1</td>
      <td>satır 4, sütun 2</td>
      <td>satır 4, sütun 3</td>
      <td>satır 4, sütun 4</td>
      <td>satır 4, sütun 5</td>
   </tr>
   <tr>
      <td>satır 5, sütun 1</td>
      <td>satır 5, sütun 2</td>
      <td>satır 5, sütun 3</td>
      <td>satır 5, sütun 4</td>
      <td>satır 5, sütun 5</td>
   </tr>
</table>

Tablomuzun ön izlemesi şu şekilde:

satır 1, sütun 1 satır 1, sütun 2 satır 1, sütun 3 satır 1, sütun 4 satır 1, sütun 5
satır 2, sütun 1 satır 2, sütun 2 satır 2, sütun 3 satır 2, sütun 4 satır 2, sütun 5
satır 3, sütun 1 satır 3, sütun 2 satır 3, sütun 3 satır 3, sütun 4 satır 3, sütun 5
satır 4, sütun 1 satır 4, sütun 2 satır 4, sütun 3 satır 4, sütun 4 satır 4, sütun 5
satır 5, sütun 1 satır 5, sütun 2 satır 5, sütun 3 satır 5, sütun 4 satır 5, sütun 5

Şimdi bu tablonun ilk satırında, ilk sütununda, son satırında, son sütununda ve merkezinde olmayan bir yerini seçelim, mesela 2. satır 4. sütun gayet uygun olacaktır. Bunun için öncelikle HTML hiyerarşi gereği önce satırı daha sonra ise sütunu seçeceğiz ve tek sitillendirme için çift seçici kullanmış olacağız.

tr:nth-child(2) td:nth-last-child(2) {
    background-color: #33363c;
    color: #ffffff;
}

Üstteki CSS sitillendirme işlemini uyguladığımızda istediğimiz sonuca ulaşmış oluyoruz. Aynı şekilde farklı satır ve sütunları seçebilirsiniz.

satır 1, sütun 1 satır 1, sütun 2 satır 1, sütun 3 satır 1, sütun 4 satır 1, sütun 5
satır 2, sütun 1 satır 2, sütun 2 satır 2, sütun 3 satır 2, sütun 4 satır 2, sütun 5
satır 3, sütun 1 satır 3, sütun 2 satır 3, sütun 3 satır 3, sütun 4 satır 3, sütun 5
satır 4, sütun 1 satır 4, sütun 2 satır 4, sütun 3 satır 4, sütun 4 satır 4, sütun 5
satır 5, sütun 1 satır 5, sütun 2 satır 5, sütun 3 satır 5, sütun 4 satır 5, sütun 5

Eğer aynı sitillendirme için birden fazla satır ve sütünü seçmek isterseniz bunun için , virgül ayıracını kullanabilirsiniz. Virgül ile aynı sitili sınırsız elemana uygulamak mümkün.

tr:nth-child(2) td:nth-last-child(2), tr:nth-last-child(2) td:nth-child(2) {
    background-color: #33363c;
    color: #ffffff;
}
satır 1, sütun 1 satır 1, sütun 2 satır 1, sütun 3 satır 1, sütun 4 satır 1, sütun 5
satır 2, sütun 1 satır 2, sütun 2 satır 2, sütun 3 satır 2, sütun 4 satır 2, sütun 5
satır 3, sütun 1 satır 3, sütun 2 satır 3, sütun 3 satır 3, sütun 4 satır 3, sütun 5
satır 4, sütun 1 satır 4, sütun 2 satır 4, sütun 3 satır 4, sütun 4 satır 4, sütun 5
satır 5, sütun 1 satır 5, sütun 2 satır 5, sütun 3 satır 5, sütun 4 satır 5, sütun 5
Masaüstü Tarayıcılar
Seçiciler
Google Chrome Microsoft Edge Mozilla Firefox Opera Safari Internet Explorer
:nth-child(n)1+Evet3.5+9.5+3.1+9+
:nth-last-child(n)4+Evet3.5+9+3.2+9+
Mobil Tarayıcılar
Seçiciler Android Webview Samsung İnternet Google Chrome Microsoft Edge Mozilla Firefox Opera Safari
:nth-child(n)EvetEvetEvetEvet4+9.5+3.1+
:nth-last-child(n)EvetEvetEvetEvet4+10+3.2+

Diğer seçiciler ile ilgili bilgi sahibi olmak isterseniz alttaki bağlantıdan tüm CSS seçicilerinin olduğu listeye ulaşabilirsiniz.

2
Bir yorum yap yada bir soru sor.

avatar
1 Yorum konuları
1 Konu cevapları
0 Takipçiler
 
En çok beğenilen yorum dizilişi
En iyi yorum dizilişi
2 Yorum yazarları
fatih şahinÜsküdar Son yorum yazarları
  Yorumlara Abone Ol  
Önce Yeniler Önce Eskiler Önce Beğenilenler
Bildir
Üsküdar
Üsküdar

child ve nth-child, CSS3 ile birlikte gelen en güzel özelliklerden biri. Belirtmekte fayda var, CSS3 sadece IE9+ üzeri ve diğer güncel tarayıcılarda çalışıyor. Güzel bir makale olmuş. Arşivime ekliyorum. Teşekkürler.

fatih şahin
fatih şahin

mükemmel anlatım bu siteye rast geldiğime çok sevindim çok teşekkürler