CSS 자식 요소 선택하는 인접 선택자 두 가지 방법

2022. 6. 29. 00:09

부모 요소의 자식 요소들 끼리, 그러니까 자매 및 형제 요소들을 선택하는 방법은 두 가지가 있습니다. 여기에서는 부모 요소를 기준으로 하는것이 아닌, 자식 요소간의 선택 방법입니다. 본문 내용의 이해를 돕고자 아래의 예시를 먼저 살펴보시기 바랍니다.

See the Pen ~ 선택자 // + 선택자 by rgy0409 (@rgy0409) on CodePen.

~ 선택자

물결표 모양의 특수 기호를 사용한 선택 방법입니다. 이 기호를 사용하게되면 같은 F1 세대의 모든 자식 요소가 일괄 선택됩니다. 단 HTML의 마크업 순서가 중요한데, 기준으로 선정한 태그의 다음 태그들이 일괄 선택되어집니다. 위의 예시에서 test1의 ID값을 갖는 div 안의 태그를 살펴보시기 바랍니다.

<div id="test1">
    <h3>H3</h3>
    <h3>H3</h3>
    <div>DIV</div>
    <h3>H3</h3>
    <h3>H3</h3>
    <h3>H3</h3>
</div>

이렇게 되어있습니다. 그리고 CSS를 살펴봅시다.

div#test1 div ~ h3 {
  color: red;
}

부모 요소의 div 안쪽에는 5개의 h3 요소와 한 개의 div 자식 요소가 들어있습니다. 그중에서 기준이 되는 요소를 div 태그로 지정하고 ~를 사용해 h3 태그의 컬러를 빨강으로 바꾸라는 스타일을 적용시켜 주었습니다. 그랬더니 결과가 어떻게 됩니까? div 위의 h3 태그에는 영향을 주지 않고, 아래쪽에 마크업 되어있는 h3의 모든 태그에 영향을 줍니다. 그래서 DIV 글씨 아래의 3개의 H3 글씨가 빨갛게 적용되는 것입니다.

+ 선택자

이번에는 플러스 기호의 선택자를 사용했을 때 결과입니다. 위의 예시를 보시면 아시겠지만 DIV 글씨의 바로 아래에 있는 H3 글씨만 빨갛게 적용되고 나머지는 영향을 받지 않게 됩니다. 그래서 + 선택자를 다른 말로 인접 형제(자매) 선택자라고 표현합니다. 말그대로 가장 인접한 선택자에만 영향을 준다는 것입니다. +선택자도 ~선택자와 마찬가지로 기준 태그 위에 마크업 되어있는 다른 형제자매 선택자에게는 영향을 주지 않습니다. 그러면 간단히 정리해 보겠습니다.

개념 정리

이렇게 정리할 수 있겠습니다. 선택된 태그의 HTML 기준으로 위의 요소들은 전혀 영향을 주지 않습니다. 기준이 되는 선택 태그 바로 아래의 요소에게만 영향을 준다는 특성을 잘 기억해 주시기 바랍니다. 단 ~선택자인지 +선택자인지 그 적용범위가 다르다는게 핵심입니다. 끝.