:first-child


version 1.1.4 以降

解説

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

記法

:first-child

:firstと:first-childの違い

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

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

例

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

$("div[id^=block-] :first-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>

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

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