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 ????