幾つかのbutton要素が入ったdivがあります。
:only-childセレクターで選択できたものは、buttonではなくtextに置き換えて”Alone”と表示するようにします。
Selectors/API/jQuery
:only-child
各親要素が1つだけ子要素を持つ場合に、その子要素を選択します。
複数の子要素を持つ要素からは、何も選択されません。
また、子要素が無い場合も何も選択されません。この場合の子要素にテキストノードは含まれません。
複数の子要素を持つ要素からは、何も選択されません。
また、子要素が無い場合も何も選択されません。この場合の子要素にテキストノードは含まれません。
サンプル
サンプル1
<div> <button>Sibling!</button> <button>Sibling!</button> </div> <div> <button>Sibling!</button> </div> <div> None </div> <div> <button>Sibling!</button> <button>Sibling!</button> <button>Sibling!</button> </div> <div> <button>Sibling!</button> </div>
$("div button:only-child").text("Alone").css("border", "2px blue solid");
[全コードを表示]
[実行結果を単体で表示]