Biraz teknoloji, bazen ben

Menu & Search

CSS3 child ve nth-child Kullanımı

15 Şubat 2016

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

Benzer İçerikler

Ünlü Diziler Korona Zamanı Çekilselerdi Nasıl Olurdu?

Slovenyalı tasarımcı Jure Tovrljan’dan bu kez karantina sırasında çekilmiş olsa…

“Sosyal Mesafe”den Sonra Ünlü Markaların Logoları

Slovenyalı tasarımcı Jure Tovrljan, ünlü markaların logolarını koronavirüs (covid-19) için…

Vatan Bilgisayar Kurnazlığı – Şikayet

Yakın bir arkadaşımın Vatan Bilgisayar tarafından nasıl taklaya getirildiğini sizinle…

Yorum post

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Type your search keyword, and press enter to search