:first-child ve :last-child Nasıl Kullanılır?

Özellikle tablolar ve listeler üzerinde çalışan yada çalışmayı düşünenler için oldukça büyük bir öneme sahip olan child (çocuk) seçicilerinin ilk ikisini bu konuda anlatıyoruz. Diğer seçiciler :first-child ve :last-child‘ göre biraz daha üst seviyede yer aldığı için öncelikle bu seçicilerin ne işe yaradığını iyi bir şekilde anlaşıldığından emin olmalısınız.

Child seçicileri isminden de az çok anlaşılacağı gibi birden fazla birbirinin aynısı olan alt bileşenler içerisinde seçili işlem yapmayı sağlıyor. Yani eğer bir bileşene class yada ıd verilmemiş/verilememiş ise ve bu bileşen sıralı ise HTML yerine CSS ile seçmemiz gerekecek demektir. Örnek vermek gerekir ise şu yapıya vereceğimiz CSS komutları tüm bileşenlerde çalışacaktı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>
   </tr>
</table>

Yukarıdaki yapının önizlemesi ş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

Örnek HTML tablo yapısına uyguladığımız CSS kodu şu şekilde:

table td {
    background-color: #33363c;
    color: #ffffff;
}

CSS uygulanmış halinin önizlemesi şu şekilde oluyor:

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

Peki ya biz tablonun tüm sütunlarına bu işlemi uygulamak istemiyorsak? İşte tamda burada child seçicilerini kullanmamız gerekecek. Mesela tablonun ilk sütununu seçmek istersek :first-child seçicisini, son sütununu seçmek istersek de :last-child seçicisini kullanmamız gerekir. Uygulaması ise şu şekilde oluyor;

table td:first-child {
    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
table td:last-child {
    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

Biz her ne kadar bu konuyu tablolar üzerinden anlatıyor olsak da HTML yapısı gereği bir çok yerde bu çözüme ihtiyaç duyulmaktadır, mesela buna örnek vermek gerekir ise sitelerde bulunan yatay veya dikey menüler diyebiliriz. Bir çok menü otomatik id ile ayrışmış olsa da menüde bir değişiklik olduğunda bu id değeri değişeceği ya da silineceği için CSS kodları boşta kalacaktır, bu nedenle kalıcı çözüm için CSS ile ilk ve son çocuk seçicisini kullanarak kodlama yapmak daha mantıklı olacaktır.

Konuyu biraz da zenginleştirip tek satırdan oluşmayan bir tablo kullanarak örneklendirmek gerekir ise örnek HTML kodumuz yazının bu kısmında değişerek şu şekli alıyor;

<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>
   </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>
   </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>
   </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>
   </tr>
</table>

4 satırlık yeni tablomuz şu şekilde görünüyor:

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 2, sütun 1 satır 2, sütun 2 satır 2, sütun 3 satır 2, sütun 4
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 4, sütun 1 satır 4, sütun 2 satır 4, sütun 3 satır 4, sütun 4

Aynı CSS kodlarını kullandığımızda sonuç şu şekilde oluyor:

table td:first-child {
    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 2, sütun 1 satır 2, sütun 2 satır 2, sütun 3 satır 2, sütun 4
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 4, sütun 1 satır 4, sütun 2 satır 4, sütun 3 satır 4, sütun 4
table td:last-child {
    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 2, sütun 1 satır 2, sütun 2 satır 2, sütun 3 satır 2, sütun 4
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 4, sütun 1 satır 4, sütun 2 satır 4, sütun 3 satır 4, sütun 4

Peki ya ilk ve son sütun yerine ilk ve son satırı seçmek istenir ise ne yapmak gerekir derseniz çözüm çok basit. Sütunları oluşturan tablo bileşeni td yerine satırları oluşturan tr üzerinde seçme işlemi yapmamız gerekiyor. Yani td:first-child yerine tr:first-child ve td:last-child yerine tr:last-child gelmesi gerekiyor. Örnekler ise şu şekilde;

table tr:first-child {
    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 2, sütun 1 satır 2, sütun 2 satır 2, sütun 3 satır 2, sütun 4
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 4, sütun 1 satır 4, sütun 2 satır 4, sütun 3 satır 4, sütun 4
table tr:last-child {
    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 2, sütun 1 satır 2, sütun 2 satır 2, sütun 3 satır 2, sütun 4
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 4, sütun 1 satır 4, sütun 2 satır 4, sütun 3 satır 4, sütun 4

Buraya kadar her şey tamam ise seviye atlamanın da zamanı geldi demektir. İlk ve sonlar için bu seçiciler her zaman yeterli olacaktır, ancak birde herhangi bir satır ve sütünü tek olarak seçme durumu var ki orada devre farklı bir CSS seçicisi giriyor. Bu durumlarda kullanılan CSS seçicisi ise :nth-child() ve bu seçiciden türeyen :nth-last-child().

Bu seçici ile ilgili ise yakın zamanda bir yazılı anlatım hazırlayıp sizlere bu seçicinin de nasıl kullanıldığını anlatacağız. Daha fazlası için bizi takip etmeyi unutmayın, :nth-child() ve :nth-last-child() ile ilgili bir içerik yayınlandığında ise bağlantısı hemen altta yer alacak! Eğer var ise yayınlamışız demektir ;)

Masaüstü Tarayıcılar
Seçiciler
Google Chrome Microsoft Edge Mozilla Firefox Opera Safari Internet Explorer
:first-child4.0+Evet3.0+9.5+3.1+7.0+
:last-child4.0+Evet3.0+9.5+3.2+9.0+
Mobil Tarayıcılar
Seçiciler Android Webview Samsung İnternet Google Chrome Microsoft Edge Mozilla Firefox Opera Safari
:first-childEvetEvetEvetEvet4.0+9.5+4.0+
:last-childEvetEvetEvetEvet4.0+10.0+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ı
Murat Dinçishana Son yorum yazarları
  Yorumlara Abone Ol  
Önce Yeniler Önce Eskiler Önce Beğenilenler
Bildir
ishana
ishana

CSS ile kullanımında spesifik seçicileri konu almışsınız. Her zaman lazım olmasa da, lazım olduğunda da çok kullanışlı seçicilerdendir first-child ve last-child. CSS kaynak kitaplarında o kadar az bahsediliyor ki bu iki seçiciden. Bu sayfada verdiğiniz bilgiler birçok kaynaktan daha fazla yer kaplamış. Acaba c# gibi diler de kullanılan liste üyeleri için de kullanılabiliyor mu?