:only-child Seçicisi;
Elementin tek çocuğu olan her elementi seçmek için kullanılır.
Örnek
$("li:only-child").css("background-color", "red");
Codepen Ön izleme
Kullanım şekilleri;
$(“:only-child”)
Elementin tek çocuğu olan her elementi seçmek için kullanılır.
$("li:only-child").css("background-color", "red");
$(“:only-child”)
index numarası tek olan elementleri seçmek için kullanılır. 1,3,5 gibi . index numaraları 0’dan başlar.
$("li:odd").css("background-color", "red");
$(“:odd”)
N’ inci çocuk olan tüm elementleri seçmek için kullanılır.
$("li:nth-of-type(2)").css("background-color", "red");
:nth-of-type(n|even|odd|formula)
N sayma sayısından başlar başa doğru devam eder. Yani sondan seçicide denilebilir.
<iframe height='268' scrolling='no' src='//codepen.io/w3tr/embed/WwjpXX/?height=268&theme-id=19659&default-tab=result' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen <a href='http://codepen.io/w3tr/pen/WwjpXX/'>jQuery :nth-last-of-type() Seçicisi</a> by W3TR (<a href='http://codepen.io/w3tr'>@w3tr</a>) on <a href='http://codepen.io'>CodePen</a>. </iframe>
Belirtilen element dışındaki tüm elementleri seçmek için kullanılır.
$("p:not(.w3tr)").css("background-color", "red");
$(“:not(selector)”)
Aynı anda birden fazla element seçmek için kullanılır.
$("h3, div, p").css("background-color", "red");
$(“element1,element2,element3,…“)
Belirtilen sayıdan daha küçük indeks numarasına sahip elementleri seçmek için kullanılır.
$("li:lt(2)").css("background-color", "red");
$(“:lt(index)”)
Eşleşen son elementi seçmek için kullanılır.
<iframe height='268' scrolling='no' src='//codepen.io/w3tr/embed/wGJVGJ/?height=268&theme-id=19659&default-tab=result' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen <a href='http://codepen.io/w3tr/pen/wGJVGJ/'>wGJVGJ</a> by W3TR (<a href='http://codepen.io/w3tr'>@w3tr</a>) on <a href='http://codepen.io'>CodePen</a>. </iframe>
$(“:last”)
Belirtilen tipte olan elementleri bulur ve sonuncusuna uygular. Last-child ile benzerlik gösterir.
$("li:last-of-type").css("background-color", "red");
$(“:last-of-type”)
Ebeveynlerden son çocuk tüm elementleri seçmek için kullanılır.
İpucu: İlk çocuk elementi seçmek için first-child seçicisini kullanın.
$("li:last-child").css("background-color", "red");
$(“:last-child”)