동위 선택자는 동위 관계에서 뒤에 위치한 태그를 선택할 때 사용하는 선택자입니다. 아래 예시1을 보면 알 수 있습니다.
동위 선택자를 사용하면 이러한 동위 상태에 있는 태그의 위치 관계를 파악할 수 있습니다.
| 선택자 형태 | 설명 |
| 선택자A + 선택자B | 선택자A '바로' 뒤에 위치하는 선택자B를 선택합니다. |
| 선택자A ~ 선택자B | 선택자A 뒤에 위치하는 선택자B를 선택합니다. |
동위 선택자를 사용해 만든 예시2를 참고하면 h1 + h2 선택자는 h1 태그 '바로' 뒤의 h2 태그에 적용이 되어 4개의 h2 태그중 h1 태그 바로 아래의 h2 태그가 color 속성에 red 값이 적용이 된 것을 알 수 있으며, h1 ~ h2 선택자는 h1 태그의 뒤에 있는 h2 태그에 적용이 되어 4개의 h2 태그 모두 background-color 속성에 orange 값이 적용이 된 것을 알 수 있습니다.
'프로그래밍 공부 > CSS3' 카테고리의 다른 글
| CSS3 - 상태 선택자 (0) | 2019.11.15 |
|---|---|
| CSS3 - 반응 선택자 (0) | 2019.11.14 |
| CSS3 - 후손 선택자와 자손 선택자 (0) | 2019.11.14 |
| CSS3 - 속성 선택자 (0) | 2019.11.13 |
| CSS3 - 아이디 선택자와 클래스 선택자 (0) | 2019.11.13 |
