Aslında burada bahsedeceğim filtreler CSS3 ile gelen özelliklerdir, henüz günümüzde kullanılan tarayıcıların tamamı bazı seçici ve filtreleri desteklemediği için jQuery bölümünde anlatmak daha mantıklı olur diye düşündüm.
jQuery tarayıcıların CSS yorumlayıcıları tarafından henüz tanınmayan (desteklenmeyen) seçici ve filtreleri kendi içinde birtakım yöntemlerle (for döngüleri vs.) kullanmamızı sağlıyor.
Yukarıda bahsettiğim seçici ve filtrelere örnek olarak :last-child filtresini ele alalım, bu filtre CSS ile kullanıldığında ie8 ve ie9'da çalışmamaktadır fakat jQuery ile kullanıldığında bahsedilen tarayıcılar olumlu sonuç vermektedir.
Lafı fazla uzatmadan örneklerimize geçelim.
:nth-child() Filtresi
Girilen seçicinin parantez içinde belirtilen numaralı elemanı (index değil) ve o elemanın altındaki tüm elemanları seçer.
$(".liste p:nth-child(3)").css("background-color","#FF0");
Örneği incelemek için tıklayın.
:first-child Filtresi
Bu filtre verilen seçicinin altındaki ilk nesneyi seçer
$(".liste p:first-child").css("background-color","#FF0");
Örneği incelemek için tıklayın.
:last-chilt Filtresi
Bu filtre first-child'ın tam tersi yani verilen seçicinin altındaki son elemanı seçer.
$(".liste p:last-child").css("background-color","#FF0");
Örneği incelemek için tıklayın.
:only-child Filtresi
Çok enteresan olan ve genelde hiç kullanmadığım (pek işime yaramayan) bir filtre. Verilen seçicinin içindeki nesne tek ise tek olan nesneyi seçer. Örneği inceleyerek daha net anlayabilirsiniz.
$(".liste p a:only-child").css("background-color","#FF0");
Örneği incelemek için tıklayın.
Bundan sonraki birkaç jQuery yazısında bahsetmediğim diğer filtreleri inceleyip animate, css, data, attr gibi konulara daha sonra değineceğim. Yukarıda yapılmış örnekleri buradan indirebilirsiniz.