CSS3 - 동위 선택자

동위 선택자는 동위 관계에서 뒤에 위치한 태그를 선택할 때 사용하는 선택자입니다. 아래 예시1을 보면 알 수 있습니다.

예시1

동위 선택자를 사용하면 이러한 동위 상태에 있는 태그의 위치 관계를 파악할 수 있습니다.

선택자 형태	설명
선택자A + 선택자B	선택자A '바로' 뒤에 위치하는 선택자B를 선택합니다.
선택자A ~ 선택자B	선택자A 뒤에 위치하는 선택자B를 선택합니다.

예시2

동위 선택자를 사용해 만든 예시2를 참고하면 h1 + h2 선택자는 h1 태그 '바로' 뒤의 h2 태그에 적용이 되어 4개의 h2 태그중 h1 태그 바로 아래의 h2 태그가 color 속성에 red 값이 적용이 된 것을 알 수 있으며, h1 ~ h2 선택자는 h1 태그의 뒤에 있는 h2 태그에 적용이 되어 4개의 h2 태그 모두 background-color 속성에 orange 값이 적용이 된 것을 알 수 있습니다.