:last-child


version 1.1.4 以降

解説

マッチした要素のうち、それぞれの親要素に対する最後の子要素の場合、その要素を返します。

記法

:last-child

:lastと:last-childの違い

:lastは要素集合全体に対する、最後の要素を返します。 よって、返す要素の数は0もしくは1です。

:last-childは要素集合にある要素のうち、それぞれの親要素に対する最後の子要素の場合、その子要素を返します。 よって、返す要素の数は0以上です。

例

例1:id属性が"block-"で始まる"div"要素の子孫要素のうち、親要素の最後の子要素の背景を黄色にします。 

$("div[id^=block-] :last-child").css("background-color", "yellow");


<div id="block-a">
    <span>block-a で 1 番目の 要素</span>
 <p>block-a で 2 番目の 要素</p>
    <span>block-a で 3 番目の 要素</span>
    <span>block-a で 4 番目の 要素</span>
    <span>block-a で 5 番目の 要素</span>
    <span>block-a で 6 番目の 要素</span>
</div>
    
<div id="block-b">
    <span>block-b で 1 番目の 要素</span>
</div>
    
<div id="block-c">
 <p>block-c で 1 番目の 要素</p>
    <span>block-c で 2 番目の 要素</span>
    <span>block-c で 3 番目の 要素</span>
    
    <div id="inner-a">block-c で 4 番目の 要素
     <p>inner-a で 1 番目の 要素</p>
        <span>inner-a で 2 番目の 要素</span>
    </div>
</div>

ページトップヘページトップヘ

ページトップヘページトップヘ