Advanced Selectors

CSS에서 스타일을 적용할때 보통 클래스 이름과 id를 이용하여 스타일을 적용시킵니다. 그런데 >, +, ~ 이런 형태로 css를 적용하는 것을 보셨을수도 있는데요. 오늘은 이 3가지 Child and sibling combinators(자식 및 형제 결합자)에 대해 정리해 보겠습니다.

 <main class="parent">
      <div class="child group1">
        <div class="grand-child group1"></div>
      </div>
      <div class="child group2">
        <div class="grand-child group2"></div>
      </div>
      <div class="child group3">
        <div class="grand-child group3"></div>
      </div>
 </main>

위에 같은 구조가 있을 때 main안에 있는 div 요소들을 모두 선택한다면 저희는 다음과 같이 적을 수 있습니다.

main div {
  /* 적용할 속성들 */
}

그런데 만약 모든 div를 선택하고 싶지 않고 child인 div혹은 grand-child(자손) div만 선택하고 싶다면 어떻게 할 수 있을까요? 이럴 때 유용한 결합자는 >(자식 결합자)가 사용됩니다. 한 단계 바로 아래인 요소를 선택한다고 쉽게 생각할 수 있습니다.

자식 결합자 (the child combinator)

/* main 요소 내부에 클래스가 child div 모두 선택 */
main > div {
  
}

/* 클래스가 grand-child div 모두 선택 */
main > div > div {
  
}

인접 형제 결합자 (the adjacent sibling combinator)

그렇다면 우리가 하나의 요소에 바로 인접하는 요소를 선택하려면 어떻게 할 수 있을까요? 바로 + 기호인 인접 형제 결합자(the adjacent sibling combinator)를 사용하면 됩니다.

/* 오직 클래스 child group2인 div만 선택 */
.group1 + div {
  
}

/* 오직 클래스 child group3인 div만 선택 */
.group1 + div + div {
  
}

일반 형제 결합자 (the general sibling combinator )

마지막으로 하나의 형제 요소가 아닌 모든 형제를 선택하려면 ~ 기호(일반 형제 결합자)를 사용애해야 합니다. +와 다르게 group1(선택한 요소) ~ div(모든 형제들)을 선택합니다.

/* group1인 div의 형제인  group2,  group3인 div 선택*/
.group1 ~ div {
  /* Our cool CSS */
}