:only-child


version 1.0 以降

解説

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

記法

:only-child

＊テキストノードは要素に含まれません。

例

例1:id属性が"block-"で始まる"div"要素の子孫要素のうち、親要素の唯一の子要素（ひとつしか要素を持たない）の背景を黄色にします。 

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

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

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