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ı.

Berkay Davas tarafından

15 Haziran 1999’da İstanbul’da doğdum. İlk ve orta öğrenimimi İstanbul’da tamamladım ardından 2017 yılında Çapa Anadolu Öğretmen Lisesinden mezun oldum. Lise yıllarında başladığım web tasarım ve programlama işini 6 senedir profesyonel olarak sürdürmekteyim. Halihazırda Beykent Üniversitesinde Bilgisayar Mühendisliği eğitimi almaktayım.

Yorum Gönderin

E-posta hesabınız yayımlanmayacak.