:only-child

オンリーチャイルド（セレクタ）

意味特定の要素が唯一の子要素である場合

:only-childとは？

:only-child疑似クラスは、ある要素がその親要素の唯一の子要素である場合にスタイルを適用するために使用します。これは、その要素が兄弟要素を持たないという条件を満たす時に限ります。

:only-childの具体的な使い方

唯一の子要素のスタイリング例

<style>
  p:only-child {
    color: red;
  }
</style>

<div>
  <p>唯一の段落</p>
</div>

親要素の中で唯一の子要素であるp（段落）要素のテキスト色を赤に設定します。

:only-childに関するよくある質問

Q. :only-childの使用例は？

A. :only-childは、親要素内で唯一の子要素に対してスタイルを適用したい場合に使用します。例えば、リスト内に1つの項目しかない場合にその項目を強調したり、単一の段落にのみ特別なスタイルを適用したりする際に便利です。

Q. :only-childと:first-childの違いは？

A. :only-childは要素が唯一の子要素である場合にのみ適用されますが、:first-childは最初の子要素に適用されます（他の兄弟要素が存在しても）。つまり、:only-childは兄弟要素がない場合にのみ適用されます。

Q. :only-childが効かない場合は？

A. :only-childが効かない場合、対象の要素が実際に唯一の子要素でない可能性があります。空白のテキストノードや、コメントノードが存在する場合も:only-childは適用されません。要素構造を確認し、余分なノードがないか確認してください。

:only-childが学べる書籍の紹介

「プログラミング単語帳」を使って、プログラミングの単語を英単語のように学習してみませんか？
プログラミング単語帳には、CSSの:only-childや[attr~=value]、:empty、:nth-of-type()、などのような実務でよく使われる単語が数百以上収録されています。
この書籍には、プログラミングの単語の意味や読み方、単語の使い方がわかる例文などが掲載されており、いつでもどこでもプログラミングの学習ができます。

よく使われる単語にだけ絞って学習することができるので、効率的にプログラミングが学習できます。