Css’de gt ve lt seçicileri

Normal şartlarda jquery’de olan gt ve lt seçicileri css’de bulunmuyor.. Ancak css kullanarakta bu işlemleri yapmamız mümkün.. Bu yazımda sizlere bunu göstereceğim.

gt seçicisi

jQuery’de :gt() seçicisi girilen indis değerinden büyük indise sahip nesneleri seçmemizi sağlar.. Yani 5 tane listemiz olduğunu düşünürsek ilk 3’ü hariç diğerlerine işlem yapmak istediğimizde şöyle bir kod uygularız;

$("ul li:gt(2)").css("color","red");

Canlı Demo: http://codepen.io/tayfunerbilen/pen/EjftH

Şimdi bunun aynısını css ile yapalım;

ul li:nth-of-type(3) ~ li {
  color: red
}

Canlı Demo: http://codepen.io/tayfunerbilen/pen/pBdGg

lt seçicisi

jQuery’de :lt() seçicisi girilen indis değerinden küçük indise sahip nesneleri seçmemizi sağlar. Yani 5 tane listemiz olduğunu düşünürsek ilk 3’üne işlem yapmak için şöyle bir kod uygularız;

$("ul li:lt(3)").css("color","red");

Canlı Demo: http://codepen.io/tayfunerbilen/pen/Abdmp

Şimdi bunun aynısını css ile yapalım;

ul li {
  color: red
}
ul li:nth-of-type(3) ~ li {
  color: #000
}

Canlı Demo: http://codepen.io/tayfunerbilen/pen/bKtcH

Evet gördüğünüz gibi, css’de birazcık hile ile bu işlemleri yapabildik 🙂 Gerçi lt olayı tam anlamıyla sağlıklı çalışmıyor ama yinede ilerisi için ne olur bilinmez 🙂

Not: ~ ve :nth-of-type(n) seçicileri css3 seçicileri olduğu için sadece modern tarayıcılar desteklemektedir. Gerçi biraz araştırdım ~ ie7 ve üzeri destekliyormuş, onuda ekleyeyim ek olarak 🙂

Yayınlayan

Tayfun Erbilen

2009’dan beri web işleriyle uğraşan, aynı zamanda amatör müziklede ilgilenen sıradan birisi..

“Css’de gt ve lt seçicileri” üzerine 7 yorum

  1. Eskiden hep jquery ile yapardım bununda olduğuna sevindim sonuçta aynı mantık 🙂 Teşekkürler.

  2. kardeşim merhabalar seni severek takip ediyorum frelance iş almışsın tasarımını merak ettim açıkcası bitince psd halini görme imkanımız varmı acaba?

  3. @murat atacan, psd halini derken 🙂 görselleri bitirdiğimde darkod üzerinden inceleyebilirsiniz son eklenen referanslardan.

  4. gt : [g]reater [t]han
    lt : [l]ower [t]han

    böyle kelime gruplarının baş harflerini alıp alıp seçici yapıyorlar ^^

Bir Cevap Yazın

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