Css İle Çift-Tek İndisli Elemanları Seçmek

Tarih: 03:14 Yazar: Unknown 0 yorum

Bazen çift-tek indisli elemanlara farklı stiller vermek istiyoruz. ve hemen jQuery ile odd seçicisini kullanarak stil veriyoruz.

Şimdi css nin bize sunmuş olduğu niteliklerle çift ve tek indisli elementlerimizi seçmeyi görelim.
Şöyle bir html yapımız olsun.
[html]

• bordo


• mavi


• bordo


• mavi


• bordo


• mavi


• bordo


• mavi


• bordo


• mavi


• bordo


• mavi

[/html]

Css Kodumuz:

[css]


ul li {
width:200px;
padding:5px;
list-style: none;
text-align: center;
font:16px arial;
color:#fff;
}
ul li:nth-child(2n + 1) {
background: #A70529;
}
ul li:nth-child(2n) {
background: #2CB0E9;
}



[/css]

Css Kodlarımızı açıklayacak olursak;

nth-child() çocuk elementleri seçmemize yarar. örn: ul li:nth-child(3) gibi.

Bizim yaptığımız işlem çocuk seçicileri biraz daha genelleştirmek oldu yani direk 2-3-5 gibi sayılar vermek yerine genel tanım yaptık.
matematiktende bileceğiniz gibi 2n çift sayıyı temsil eder bizde çift indisli çocukları 2n ile seçtik.
2n çift olduğuna göre 2n+1 kesin tektir bunuda matematik bize söylüyor :) bizede tek indisli çocukları seçmek için 2n+1 yazmak kalıyor :)



Demo :

• bordo


• mavi


• bordo


• mavi


• bordo


• mavi


• bordo


• mavi


• bordo


• mavi


• bordo


• mavi

Bol Kodlu Günler :)