Rehber CSS Child Özelliği

Bu rehberimde yeni başlayanlar için CSS'in eski özelliklerinden olan child özelliğinden bahsedeceğim. Bootstrap gibi frameworkler çıkmadan önce grid sisteminde bize çok yardımcı olurdu. Child özelliğini 3 başlıkta inceleyebiliriz. Bir de bonus başlık olacak.

1. İlk Elemanı Seçme [:first-child]​

Bu seçenek ile bir etiket içindeki ilk elemanı seçebiliriz. Mesela bir liste yaptığımızı düşünelim ve aralarına margin-top ile boşluk verdik. Bu özellik sayesinde ilk elemandaki boşluğu kaldırabiliriz. Hem JSFiddle'dan örneğimizi gösterelim.

2. Son Elemanı Seçme [:last-child]​

Bu seçenek ile bir etiket içindeki son elemanı seçebiliriz. Bunun için de ile yan yana koyduğumuz 4 tane kolonun arasına boşluk koyduğumuzu ve sonuncusu için boşluk olduğunda alt satıra geçtiğini düşünelim. Son elemanı seçerek boşluğu kaldırabiliriz.

3. Katsayı veya Tam Sayı ile Elemanı Seçme [:nth-child]​

Bu seçenek ile :nth-child(%sayi%) yazarak spesifik olarak bir sıradaki elemanı seçebiliriz. Bir diğer seçenek ise kat sayı kullanarak birden çok elemanı seçmektir. Şöyle düşünelim;

4 kolonlu bir yapımız var ve hepsinin solunda margin-left ile bir boşluk var. Bunları bir satıra hizalamak için 1, 5, 9,... elemanlarının solundaki boşluğu kaldırmamız gerekiyor. Bu da 4n + 1 kuralına denk geliyor. İşte :nth-child(4n + 1) yaparak bu elemanları seçebiliriz. İşte örnek;

4. Bonus [:nth-last-child]​

Bu seçenek de aynı :nth-child gibi çalışır fakat seçimleri sondan yapmanızı sağlar. Verdiğim :nth-child örneği için :nth-last-child kullanmış olsaydık en sağdaki kolonların boşluğu gitmiş olacaktı.