nth-child ile nth-of-type arasındaki fark nedir?

on under CSS
1 minute read

Merhabalar, CSS’te benim biraz kafamı karıştıran konu olan nth-child ve nth-of-type seçicilerinden bahsetmek istiyorum.

İki seçici bazı durumlarda aynı rakam ile aynı elementleri seçselerde aslında farklı şeyler olduğundan her zaman aynı sonucu vermezler.

nth-child : Bu seçici ile aynı düzeydeki elementlerden index numarasına göre seçim yaparız. (0’dan başlamaz dikkat!) Başına bir tag ismi koymaz isek body tagı içerisindeki tüm parent elementler arasından seçim yapar. Tag ismi koyar isek o tag’ler arasından seçim yapar. Hemen bir örnek verelim.

:nth-of-type: Bu seçici ise türe göre seçim yapar. :nth-child’ın aksine başında tag bulundurmaz isek, aynı düzeydeki değil, aynı türdeki tüm elementler arasında seçim yapar.

<div class="container">
  <ul class="list-group">
    <li class="list-group-item">Apple</li>
    <li class="list-group-item">Orange</li>
    <li class="list-group-item">Banana</li>
    <li class="list-group-item">Kiwi</li>
  </ul>
  <p>Hello!</p>
  <p>My name is</p>
  <p>Enes</p>
  <ul class="list-group">
    <li class="list-group-item">A</li>
    <li class="list-group-item">B</li>
    <li class="list-group-item">C</li>
    <li class="list-group-item">D</li>
  </ul>
</div>

Mesela böyle bir yapımız var. Burada parent elementimiz .container‘dır

:nth-child(2){
   background:red;
}

En genelde parent olarak sadece .container class’ına sahip div olduğu için ve biz de 2 indexi seçtiğimiz için onu(.container) atlar(çünkü divimiz 1. indextedir), body tagini bulur, onu kırmızı yapar. Tüm ekran kırmızı olur.

Bazı durumlarda bu yöntem kullanılabilir fakat. Çoğu kez hataya yol açar. Mesela şimdi parantez içindeki sayıyı bir bir arttırmayı deneyin. Bu sefer 3’ten sonra <li> taglarına geçmeye başladı. Yani işler biraz karıştı.

:nth-of-type Kullanımı

:nth-of-type(2){
   background:red;
}

Bu sefer :nth-of-type kullandık. Yine tag kullanmadık. Çıktı olarak ise tüm elementlerin 2.sini ele aldı.(<p>,<li>,<ul>)

   

CSS Seçiciler Oyunu

CSS’de yeni iseniz ve seçicilerde kendinizi basit alıştırmalarla geliştirmek istiyorum derseniz CSS Diner adındaki bu güzel oyunu oynayabilirsiniz.

CSS, Seçiciler, :nth-child, :nth-of-type, HTML
comments powered by Disqus