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

CSSの:only-childセレクターを使って、親の唯一の子であるすべての

要素にスタイルを適用する方法

CSSの:only-childセレクターを使用すると、親要素内で唯一の子要素として存在する<p>要素だけを選択し、スタイルを適用することができます。兄弟要素が1つでも存在する場合、その要素は対象外となるため、特定の構造を持つHTMLに対してピンポイントでデザインを指定したいときに非常に便利です。

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

p:only-child {
  /* スタイルの指定 */
}

実装例

以下のコードでは、2つの<div>要素の中に<p>タグが配置されています。最初の<div>には<p>要素が1つだけ含まれているため、その段落のみ背景色がオレンジ色で表示されます。一方、2つ目の<div>には複数の<p>要素があるため、これらにはスタイルが適用されません。

<!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>

表示結果

上記のコードを実行すると、<p>要素が1つだけ存在する最初の<div>内の段落にのみオレンジ色の背景が適用されます。3つの<p>要素を持つ2番目の<div>内の段落は、兄弟要素が存在するためスタイルの対象になりません。

CSSの:only-childセレクターを使って、親の唯一の子であるすべての p 要素にスタイルを適用する方法

まとめ

:only-childセレクターは、要素が親の中で唯一の子であるかどうかを判定してスタイルを適用できる便利な擬似クラスです。類似のセレクターとして、指定した位置の子要素を対象とする:first-childや:last-child、:nth-childなどもあります。用途に応じて使い分けることで、HTMLの構造に柔軟に対応したCSS設計が可能になります。

  1. CSSの:nth-last-child(n)セレクターで最後の子から数えてすべてのp要素にスタイルを設定する方法

    CSSの :nth-last-child(n) セレクターを使用すると、最後の子要素から数えて、親要素の子であるすべての <p> 要素に対してスタイルを適用できます。このセレクターは末尾からn番目の子要素を対象とするため、リストや段落の中でも「後ろから数えた位置」にある要素だけを装飾したい場合に非常に便利です。 以下のサンプルコードでは、p:nth-last-child(4) と指定することで、最後から4番目の子要素にあたる段落（この例では「This is demo text 3.」）に青い背景と白い文字色が適用されます。 サンプルコード <!DOCTYPE html>

  2. CSSでhr要素（水平線）のスタイルを設定する方法をわかりやすく解説

    CSSを使ってhr要素（水平線）のスタイルを設定するには、borderプロパティを活用します。hr要素はデフォルトではシンプルな1本の線として表示されますが、border-topやborder-radiusなどを組み合わせることで、実線・破線・二重線・点線・角丸など、さまざまなデザインに自由にカスタマイズできます。以下に、代表的な5種類の水平線スタイルを実装したサンプルコードを紹介します。サンプルコード<!DOCTYPE html> <html> <meta name="viewport" content="width=device-