CSSのセレクタに「>」がある場合とない場合のスタイリングの違い

はじめに

CSSのセレクタに>がある場合とない場合の違いについて。

下記HTMLを用いて、スタイリングの違いをまとめてみようと思う。

index.html

<div id="parent">
    <p>これは#parentの直接の子要素です。</p>
    <div>
      <p>これは#parentの孫要素です。</p>
    </div>
    <p>これは#parentの直接の子要素です。</p>
  </div>

CSSのセレクタに>がある場合

下記CSSの#parent > pは子セレクタと呼ばれる。

style.css

#parent > p {
    color: white;
    background-color: black;
}

これは、親要素の直接の子要素にのみスタイルを適用する。

したがって、この場合、#parentの直接の子要素である<p>要素にのみスタイルが適用される。

実行結果：

CSSのセレクタに>がない場合

次に、下記のようにCSSを書いた場合。

style.css

#parent p {
    color: white;
    background-color: black;
}

上記のCSSのにおいて、#parent pは子孫セレクタと呼ばれる。

このセレクタは、親要素のすべての子孫要素にスタイルを適用する。

子孫要素とは、#parent要素の中に直接的または間接的に含まれるすべての要素のこと。

したがって、この場合、#parentの全ての子孫要素である<p>要素にスタイルが適用される。

実行結果：

おわりに

CSSのセレクタに>がある場合とない場合の違いについてまとめてみた。

日々の学習で気づいたことは、随時記録しておこうと思う。