:last-child - jQuery 日本語リファレンス

Selectors/API/jQuery

:last-child

各親要素の最後の子要素を選択します。

:lastセレクターが要素集合のうちから最後のひとつだけを選択するのに対し、:last-childは親要素毎の最後の子要素を選択します。

サンプル

サンプル1

div要素内にある最後のspan要素の文字を赤くするなどします。
一方、:lastセレクターで選択された要素に対しては背景を黒くします。挙動の違いを確認してください。

<div>
  <span>John,</span>
  <span>Karl,</span>
  <span>Brandon,</span>
  <span>Sam</span>
</div>
<div>
  <span>Glen,</span>
  <span>Tane,</span>
  <span>Ralph,</span>
  <span>David</span>
</div>

$("div span:last-child")
    .css({color:"red", fontSize:"80%"})
    .hover(function () {
          $(this).addClass("solast");
        }, function () {
          $(this).removeClass("solast");
        });
 
$("div span:last")
    .css("background-color", "black");

[全コードを表示] [実行結果を単体で表示]

Home

API

逆引きリファレンス

API Search: