[2022.04.16]CSSマッチング選択者、子、子、隣接兄弟、一般兄弟選択者(結合者)

MDNドキュメントでは、セレクタではなくコンボとして指定します.
便利な選択者と呼ばれています.

combinator

マッチング選択者

子孫選択者

サブセレクタ

隣接兄弟選択者

普通兄弟選択者

1.マッチングセレクタ

div.container{
	color : pink;
}

選択者と選択者との間の形態をマッチング選択者と呼ぶ.
上のコードはdivラベルを選択し、class名がcontainerの要素です.

2.子選択者

子孫選択者は、1欄以上の空白文字で を表すことができる.
親に属するすべての子または子(子)を選択します.

<div class="container">
  <h1>자손 선택자</h1>
  <p>자손 선택자는 두 선택자를 한 칸 이상의 공백으로 조합한다.</p>
</div>

.container h1 {
  color: pink;
}

3.サブセレクタ

サブセレクタは、2つのセレクタ間で>シンボルを使用する.
親の要素の真下の子供を選択します.△親によって子供を探す.
すなわち、>符号の前に条件があり、見つかったのは>符号の後である.

<div class="container">
  <h1>자식 선택자</h1>
  <p>자식 선택자는 두 선택자 사이에 > 기호를 사용한다.</p>
</div>
<hr>

<div class="hi">
  <div>
    <p>Hi, 1번 입니다.</p>
    <span>Hi, 2번 입니다.</span>
  </div>
  <p>Hi, 3번 입니다.</p>
</div>

.hi > p::after {
  content: "★";
  background: powderblue;
  color: #555;
}

4.隣接兄弟セレクタ

隣接する兄弟選択者は、選択者間で+記号を使用する.
たとえば、A+Bを作成すると、Aのすぐ後ろにあるBが選択されます.
すなわち、같은 부모の下にある형제 요소の中から바로 다음에 오는 것が選択される.

<div class="container">
  <h1>인접 형제 선택자</h1>
  <p>인접 형제 선택자는 두 선택자 사이에 + 기호를 사용한다.</p>

  <div class="content">
    <ul>
      <li class="content">★1★</li>
      <li class="content">★2★</li>
      <li>★3★</li>
    </ul>
  </div>
  <div>★</div>
  <div class="content">
    <ul class="content">
      <li>★4★</li>
      <li>★5★</li>
      <li>★6★</li>
    </ul>
  </div>
  <div class="content">
    <ul>
      <li>★7★</li>
      <li>★8★</li>
      <li>★9★</li>
    </ul>
  </div>
</div>

.content + .content {
  color: slateblue;
  background: pink;
}

5.一般的な兄弟セレクタ

一般的な兄弟選択者は隣接する兄弟と似ているが、違いもある.
隣接する兄弟が같은 부모であり、後続の要因にのみ適用される場合、일반 형제 선택자는 바로 다음에 오지 않아도 된다は部分的に異なる.

<div class="container">
      <h1>일반 형제 선택자</h1>
      <p>일반 형제 선택자는 두 선택자 사이에 ~ 기호를 사용한다.</p>

      <div class="content">
        <ul>
          <li class="content">💜1</li>
          <li>💜2</li>
          <li class="content">💜3</li>
        </ul>
      </div>
      <div>
        <ul>
          <li>💛4</li>
          <li>💛5</li>
          <li>💛6</li>
        </ul>
      </div>
      <div class="content">
        <ul>
          <li>💜7</li>
          <li>💜8</li>
          <li>💜9</li>
        </ul>
      </div>
    </div>

.content ~ .content {
  color: slateblue;
  background: pink;
}

参考資料
MDN CSS Selector