CSS 階層構造でセレクタを指定(子孫/兄弟)

CSSの階層構造でセレクタを指定するサンプルです。

目次	子と孫を指定する(空白区切り)
	子を指定する(>)
	兄弟で弟を指定する(+)
	兄弟で弟を指定する(離れていても可能)(~)

子と孫を指定する(空白区切り)

セレクタ1 セレクタ2

セレクタを空白区切りで並べた場合、子孫セレクタになります。
セレクタ1を親として、子と孫のセレクタ2の要素が対象になります。

<style>
  .div1 .p1 {
    color: red;
  }
</style>

<div class="div1">
  <p class="p1">テスト1-1</p>
</div>
<div class="div1">
  <div class="test">
    <p class="p1">テスト2-1</p>
  </div>
</div>
<p class="p1">テスト3-1</p>

2行目は、.div1 .p1となっています。
8行目は、.div1の子(.p1)のためCSSが適用されます。
12行目は、.div1の孫(.p1)のためCSSが適用されます。
15行目は、.div1の子孫ではないのでCSSは適用されません。

上記コードの実行結果です。

テスト1-1

テスト2-1

テスト3-1

以下はMDNの子孫セレクタのリンクです。
https://developer.mozilla.org/ja/docs/Web/CSS/Descendant_selectors

子を指定する(>)

セレクタ1 > セレクタ2

セレクタを>で区切って並べた場合、子セレクタになります。
セレクタ1を親として、子のセレクタ2の要素が対象になります。

<style>
  .div2 > .p1 {
    color: red;
  }
</style>

<div class="div2">
  <p class="p1">テスト1-1</p>
</div>
<div class="div2">
  <div class="test">
    <p class="p1">テスト2-1</p>
  </div>
</div>

2行目は、.div2 > .p1となっています。
8行目は、.div2の子(.p1)のためCSSが適用されます。
12行目は、.div2 の子ではないためCSSは適用されません。

上記コードの実行結果です。

テスト1-1

テスト2-1

テスト3-1

以下はMDNの子セレクタのリンクです。
https://developer.mozilla.org/ja/docs/Web/CSS/Child_selectors

兄弟で弟を指定する(+)

セレクタ1 + セレクタ2

セレクタを+で区切って並べた場合、隣接セレクタになります。
セレクタ1とセレクタ2が同じ親要素を持つ兄弟の要素で、セレクタ1の直後にあるセレクタ2の要素が対象になります。

<style>
  .div3 .p1 + .p2 {
    color: red;
  }
</style>

<div class="div3">
  <p class="p1">テスト1-1</p>
  <p class="p2">テスト1-2</p>

  <p class="p1">テスト2-1</p>
  <p>テスト</p>
  <p class="p2">テスト2-2</p>
</div>

2行目は、.div3 .p1 + .p2となっています。
8-13行目は、同じ親要素(.div3)を持つ兄弟の要素です。
9行目は、セレクタ1(.p1)の直後にセレクタ2(.p2)があるのでセレクタ2(.p2)にCSSが適用されます。
13行目は、11行目のセレクタ1(.p1)の直後にないので文字の色は変わりません。

上記コードの実行結果です。

テスト1-1

テスト1-2

テスト2-1

テスト

テスト2-2

以下はMDNの隣接セレクタのリンクです。
https://developer.mozilla.org/ja/docs/Web/CSS/Adjacent_sibling_selectors

兄弟で弟を指定する(離れていても可能)(~)

セレクタ1 ~ セレクタ2

セレクタを~で区切って並べた場合、一般兄弟セレクタになります。
セレクタ1とセレクタ2が同じ親要素を持つ兄弟の要素で、セレクタ1の後にあるセレクタ2の要素が対象になります。
セレクタ1とセレクタ2の間に別の要素があっても影響しません。(隣接セレクタとの違い)

<style>
  .div4 .p1 ~ .p2 {
    color: red;
  }
</style>

<div class="div4">
  <p class="p1">テスト1-1</p>
  <p class="p2">テスト1-2</p>

  <p class="p1">テスト2-1</p>
  <p>テスト</p>
  <p class="p2">テスト2-2</p>
</div>

2行目は、.div4 .p1 ~ .p2となっています。
8-13行目は、同じ親要素(.div4)を持つ兄弟の要素です。
9行目は、セレクタ1(.p1)の直後にセレクタ2(.p2)があるのでセレクタ2(.p2)にCSSが適用されます。
13行目は、11行目のセレクタ1(.p1)の後にあるのでCSSが適用されます。12行目に別の要素Pがありますが影響しません。

上記コードの実行結果です。

テスト1-1

テスト1-2

テスト2-1

テスト

テスト2-2

以下はMDNの一般兄弟セレクタのリンクです。
https://developer.mozilla.org/ja/docs/Web/CSS/General_sibling_selectors