:nth-last-child() Seçicisi

nth-last-child selector

Açıklama : Ebeveyninin sondan geri sayarak n'inci çocuğu olan elemanları seçer.

jQuery( ":nth-last-child(index/even/odd/equation)" ) Eklendiği Versiyon 1.9

index : Eşleşecek çocuğun index'i, sonuncudan başlayan sayma yapılır. even ve odd stringi de parametre verilebilir ya da bir eşitlik (mesela :nth-last-child(even) veya :nth-last-child(4n) ).

JQuery :nth- seçicilerini CSS seçicilerden uyarladığı için index değeri 1'den başlar. .first() veya .eq() gibi metodlar JavaScript kullandığı için sıfır temelli index değerleri kullanırlar. İki tane <li> elemanı olan <ul> listesine $("li:nth-last-child(1)") seçicisi son liste elemanını seçer.

Ayrıntılı bilgi W3C CSS specification dökümanına bakınız.

Örnekler:

Her eşleşen ul içindeki sondan ikinci li elemanını bul ve not et.

<style>
   div { float: left; }
   span { color: blue; }
</style>
<div>
   <ul>
      <li>John</li><li>Karl</li><li>Brandon</li>
   </ul>
</div>
<div>
   <ul>
      <li>Sam</li>
   </ul>
</div>
<div>
   <ul>
      <li>Glen</li><li>Tane</li>
      <li>Ralph</li><li>David</li>
   </ul>
</div>
<script>
   $("ul li:nth-last-child(2)").append( "<span> - 2nd to last!</span>" );
</script>

John
Karl
Brandon

Glen
Tane
Ralph
David

Farklı string değerler nasıl çalışıyor, verilen set üzerinde sayım yapan even ve odd metodlarından farklı olarak nth-last-child aynı ebeveynin çocuklarında sayım yapar.

<style>
   button {
      display: block; width: 110px;
      font-size: 12px;
   }
   div {
      float: left; margin: 10px;
      font-size: 10px;
      border: 1px solid black;
   }
   span {
      color: blue;
      font-size: 18px;
   }
   #inner { color: red; }
   td {
      width: 60px;
      text-align: center;
   }
</style>
<div>
   <button>:nth-last-child(even)</button>
   <button>:nth-last-child(odd)</button>
   <button>:nth-last-child(3n)</button>
   <button>:nth-last-child(2)</button>
</div>
<div>
   <button>:nth-last-child(3n+1)</button>
   <button>:nth-last-child(3n+2)</button>
</div>
<div>
   <table>
      <tr><td>John</td></tr>
      <tr><td>Karl</td></tr>
      <tr><td>Brandon</td></tr>
      <tr><td>Benjamin</td></tr>
   </table>
</div>
<div>
   <table>
      <tr><td>Sam</td></tr>
   </table>
</div>
<div>
   <table>
      <tr><td>Glen</td></tr>
      <tr><td>Tane</td></tr>
      <tr><td>Ralph</td></tr>
      <tr><td>David</td></tr>
      <tr><td>Mike</td></tr>
      <tr><td>Dan</td></tr>
   </table>
</div>
<span>tr<span id="inner"></span></span>

<script>
   $("button").on("click", function() {
      var str = $(this).text();
      var method = $(this).attr("data-method");
      $("tr").css("background", "white");
      $("tr" + str).css("background", "#ff0000");
      $( "#inner" ).text( str );
   });
</script>

John

Karl

Brandon

Benjamin

Sam

Glen

Tane

Ralph

David

Mike

Dan