Konu Dışı

CSS3 child ve nth-child Kullanımı

  • 0 Comment
  • 15 Şubat 2016
About Hakan Demirel

Özel bir şirkette Front-end Developer olarak çalışmakta. Twitter üzerinden @hakandemirel hesabını takip edebilir yada hakandemirel.com adresinden daha fazla bilgi alabilirsiniz.

Social Links

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

https://css-tricks.com/examples/nth-child-tester/https://nth-test.com/
Leave a Comment