CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSの:only-childセレクターとは？唯一の子要素だけにスタイルを適用する方法

CSSの:only-childセレクターは、親要素の中で唯一の子要素として存在する要素だけを選択し、スタイルを適用できる擬似クラスです。兄弟要素がひとつもない「一人っ子」の状態にある要素にのみ作用するため、条件付きのスタイリングを簡潔に実現できます。

:only-childセレクターの基本

例えば、以下のように記述すると、親要素内で唯一の<p>要素に対してのみ背景色が適用されます。同じ親を持つ<p>要素が複数ある場合、それらにはスタイルが適用されません。

p:only-child {
  background: orange;
}

実装例

次のコードを実行すると、:only-childセレクターの動作を確認できます。1つ目の<div>の中には<p>要素が1つしかないためオレンジ色の背景になりますが、2つ目の<div>の中には<p>要素が3つあるため、そちらには適用されません。

<!DOCTYPE html>
<html>
   <head>
      <style>
         p:only-child {
            background: orange;
         }
      </style>
   </head>
   <body>
      <h1>見出し</h1>
      <div>
         <p>これは段落です。</p>
      </div>
      <div>
         <p>これは段落です。</p>
         <p>これは段落です。</p>
         <p>これは段落です。</p>
      </div>
   </body>
</html>

ポイントまとめ

:only-childセレクターは、リストやカードなど「要素が1つの場合だけ特別な表示にしたい」という場面で特に便利です。JavaScriptを使わずCSSだけで条件分岐のような表現が可能になるため、マークアップをシンプルに保ちながら柔軟なデザインを実現できます。

  1. CSSの:nth-last-of-type(n)セレクターとは？後ろから数えて要素を指定する方法

    CSSの:nth-last-of-type(n)セレクターは、親要素の中で同じ種類の兄弟要素を末尾（最後の子）から数えて、指定した順番に該当する要素を選択するための擬似クラスです。 例えば「:nth-last-of-type(2)」を指定すると、各親要素内で後ろから2番目に位置する<p>要素だけがスタイルの対象になります。通常の:nth-of-type()が先頭から数えるのに対し、:nth-last-of-type()は逆方向からカウントする点が大きな特徴です。 :nth-last-of-type(n)セレクターの基本構文 要素:nth-last-of-type(n) { /*

  2. CSSの:nth-last-child(n)セレクターとは？使い方と実装例を解説

    CSSの:nth-last-child(n)セレクターとは :nth-last-child(n)は、CSSの擬似クラスの一つで、親要素の子要素を末尾（最後の子）から数えてn番目に該当する要素を選択するためのセレクターです。 例えば、段落やリスト項目が多数並んでいる場合に、「先頭から」ではなく「最後から何番目か」という位置を基準にスタイルを適用したいときに便利です。要素の総数が動的に変化するコンテンツでも、末尾からの位置指定なら安定したデザイン制御が可能になります。 基本的な書き方 p:nth-last-child(4) { background: blue; color: white