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

【CSS】親要素がdivのときだけp要素にスタイルを適用する方法

CSSでは、element > element(子結合子)セレクタを使うことで、特定の親要素を持つ子要素だけを正確に選択できます。本記事では、親要素が<div>であるすべての<p>要素を選択する方法を、実際のコード例とともにわかりやすく解説します。

子結合子「>」とは

「>」は子結合子(Child Combinator)と呼ばれるセレクタです。「div > p」と記述すると、<div>要素を直接の親として持つ<p>要素のみがスタイルの対象になります。孫要素やそれ以降の子孫要素には適用されない点が、子孫セレクタ(スペース区切り)との大きな違いです。

コード例

以下のサンプルでは、親が<div>要素である<p>要素に対して、文字色を白・背景色を青に設定しています。

<!DOCTYPE html>
<html>
   <head>
      <style>
         div > p {
            color: white;
            background-color: blue;
         }
      </style>
   </head>

   <body>
      <h1>Demo Website</h1>
      <h2>Fruits</h2>
      <p>Fruits are good for health.</p>
      <div>
         <p>This is demo text.</p>
      </div>
   </body>
</html>

実行結果の解説

このコードを実行すると、次のように表示が分かれます。

  • <body>直下の「Fruits are good for health.」は、親要素が<body>のためスタイルは適用されません。
  • <div>内の「This is demo text.」は、直接の親が<div>であるため、白い文字色と青い背景色が適用されます。

まとめ

子結合子「>」を活用すれば、親子関係にある要素だけをピンポイントで指定でき、意図しない要素へのスタイル漏れや過剰な適用を防げます。子孫セレクタとの違いを理解し、状況に応じて使い分けることで、より保守性の高いCSSを書くことができます。

  1. CSSでフレックスアイテムを折り返す方法｜flex-wrapプロパティの使い方

    CSSでフレックスアイテム（flex item）を折り返して表示するには、flex-wrapプロパティを使用します。デフォルト状態では、フレックスアイテムはすべて1行に並べられますが、「flex-wrap: wrap」を指定することで、コンテナの幅からあふれたアイテムを次の行へ自動的に折り返すことができます。以下のコードを実行して、flex-wrapプロパティの実際の動作を確認してみてください。flex-wrapプロパティの主な値nowrap：初期値。アイテムを折り返さず、1行に並べて表示します。wrap：コンテナの幅に収まらない場合、アイテムを次の行へ折り返します。wrap-reverse：

  2. CSSのflex-directionでフレックスアイテムを水平方向に配置する方法

    CSSでフレックスアイテムを水平方向に配置するには、flex-directionプロパティにrow値を指定します。flex-directionは、フレックスコンテナ内のアイテムが並ぶ方向（主軸の方向）を決定する重要なプロパティです。 flex-direction: row の基本 rowはflex-directionのデフォルト値で、アイテムを左から右へ横一列に並べます。なお、文書の書字方向が右から左（RTL）の場合は、逆に右から左へ並びます。 flex-directionで使える主な値 row：アイテムを水平方向（左から右）に配置 row-reverse：アイテムを水平方向（右から左）に配