CSS 선택자 중 복합자 정리

1. CSS 선택자란

선택자란 이름 그대로 선택하는 요소입니다.
id보다는 클래스를 훨씬 더 많이 이용하기 때문에, 우리는 css에서 요소들을 선택하는 방법을 정확히 알아야 할 필요가 있습니다.
선택자들을 2개 이상 사용하는 방식을 복합자(Combinator)라고 부릅니다.
복합자를 이용해 다양한 자식 요소들을 선택할 수 있습니다.
부모, 부모의 형제, 부모 형제의 자식을 선택할 수 있는 선택자는 존재하지 않습니다.

하위 선택자(Descendant Combinator)

선택자 사이의 스페이스 한 칸의 공백으로 표현합니다.
부모 아래에 있는 모든 요소들에게 적용됩니다.

<ul class="parent">
    <li class="children">1</li>
    <li class="children">2</li>
    <li class="children">3</li>
    <ul>
      <li class="grand-children">4</li>
      <li class="grand-children">5</li>
    </ul>
</ul>

ul {
  list-style : none;
  font-size : 25px;
  font-weight : 700;
}

.parent li { color: red;}

자식 선택자(Child Combinator)

선택자 사이에 >기호를 사용합니다.
부모 바로 아래 요소만 적용됩니다.

<ul class="parent">
    <li class="children">1</li>
    <li class="children">2</li>
    <li class="children">3</li>
    <ul>
      <li class="grand-children">4</li>
      <li class="grand-children">5</li>
    </ul>
</ul>

ul {
  list-style : none;
  font-size : 25px;
  font-weight : 700;
}

.parent>li { color: red;}

인접 형제 선택자(Adjacent Sibling Combinator)

선택자 사이에 + 기호를 사용합니다.
A+B라고 작성했을 때, A 바로 다음에 B가 형제요소로 작성됐을 경우 선택됩니다. 같은 부모 아래에 있어야 합니다.

<ul class="parent">
    <li class="children">1</li>
    <p>p태그라서 선택되지 않았습니다.</p>
    <li class="children">2</li>
    <li class="children">3</li>
    <ul>
      <li class="grand-children">4</li>
      <li class="grand-children">5</li>
    </ul>
</ul>

ul {
  list-style : none;
  font-size : 25px;
  font-weight : 700;
}

.children+li { color: red;}

일반 형제 선택자(General Sibling Combinator)

선택자 사이에 ~를 작성합니다.
A~B라면 자신(A) 다음으로 작성된 형제(B)들에게 적용됩니다.

<ul class="parent">
    <li class="children">1</li>
    <p>p태그라서 선택되지 않았습니다.</p>
    <li class="children">2</li>
    <li class="children">3</li>
    <ul>
      <li class="grand-children">4</li>
      <li class="grand-children">5</li>
    </ul>
</ul>

ul {
  list-style : none;
  font-size : 25px;
  font-weight : 700;
}

.children~li { color: red;}

정리하며

알아두면 좋을 것 같은 결합자들을 간단하게 정리 해보았습니다.
주로 사용하는 결합자는 하위 선택자와 자식 선택자 정도입니다.
결합자 외에도 다양한 가상선택자들이 있어 상황에 맞게 적절하게 쓰는 법이 중요한 것 같습니다.

참고 사이트
https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Selectors
https://www.nextree.co.kr/p8468/