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.
İlk yada son nesneyi seçmek;
:first-child { } /*İlk nesne*/
:last-child { } /*Son nesne*/
ul’un içinde bulunan li’lerden ilkini seçmek için;
ul li:first-child
ul’un içinde bulunan li’lerden sonuncuyu seçmek için;
ul li:last-child
İstenilen nesneyi seçmek;
ul li:nth-child(2) { }
ul’un içinde bulunan ikinci li’yi seçtik.
.container .box:nth-child(3) { }
Class’ı “container” olan bölümün içinde “box” class’ı kullanan üçüncü nesneyi seçtik.
Tek ve çift sıradaki nesneleri seçmek;
odd = tek sıradaki nesneler
event = çift sıradaki nesneler
Örnek verecek olursak;
- 1 /*odd*/
- 2 /*even*/
- 3 /*odd*/
- 4 /*even*/
- 5 /*odd*/
Tek sıradaki nesneler için kullanımı;
ul li:nth-child(odd) { }
Çift sıradaki nesneler için kullanımı;
ul li:nth-child(odd) { }
Geliştirmek ve test etmek için aşağıdaki linklerden faydalanabilirsiniz
