--- title: ':only-child' slug: 'Web/CSS/:only-child' tags: - CSS - ウェブ - セレクター - リファレンス - レイアウト - 擬似クラス translation_of: 'Web/CSS/:only-child' ---
{{CSSRef}}

CSS の :only-child 疑似クラスは、兄弟要素がない要素を表します。 :first-child:last-child または :nth-child(1):nth-last-child(1) と同じですが、詳細度はより低くなります。

/* 親の唯一の子である <p> 要素をすべて選択 */
p:only-child {
  background-color: lime;
}

メモ: 最初の定義では、親のある要素のみが選択されていました。 Selectors Level 4 の初期に、これは必要なくなりました。

構文

{{csssyntax}}

例

基本的な例

HTML

<div>
  <div>I am an only child.</div>
</div>

<div>
  <div>I am the 1st sibling.</div>
  <div>I am the 2nd sibling.</div>
  <div>I am the 3rd sibling, <div>but this is an only child.</div></div>
</div>

CSS

div:only-child {
  color: red;
}

div {
  display: inline-block;
  margin: 6px;
  outline: 1px solid;
}

結果

{{EmbedLiveSample('Basic_example','100%',180)}}

リストの例

HTML

<ol>
  <li>First
    <ul>
      <li>This list has just one element.</li>
    </ul>
  </li>
  <li>Second
    <ul>
      <li>This list has three elements.</li>
      <li>This list has three elements.</li>
      <li>This list has three elements.</li>
    </ul>
  </li>
</ol>

CSS

li li {
  list-style-type: disc;
}

li:only-child {
  color: red;
  list-style-type: square;
}

結果

{{EmbedLiveSample('A_list_example', '100%', 210)}}

仕様書

仕様書 状態 備考
{{SpecName('CSS4 Selectors', '#only-child-pseudo', ':only-child')}} {{Spec2('CSS4 Selectors')}} 選択する要素に親を必要としないようにした。
{{SpecName('CSS3 Selectors', '#only-child-pseudo', ':only-child')}} {{Spec2('CSS3 Selectors')}} 初回定義

ブラウザーの互換性

{{Compat("css.selectors.only-child")}}

関連項目