1. 동위(형제) 선택자(sibling selector)
-
동위 선택자는 동위 관계에 있는 요소 중에서 해당 요소보다 뒤에 존재하는 특정 타입의 요소를 모두 선택한다.
-
동위 관계란 HTML 요소의 계층 구조에서 같은 부모(parent) 요소를 가지고 있는 요소들을 의미한다.
-
아래 그림에서 초록색으로 표시된 세 요소는 모두
<body>요소를 부모 요소로 가지므로 이 세 요소는 동위 관계에 있는 형제 요소이다.
1) 일반 동위(형제) 선택자(general sibling selector)
- 일반 동위 선택자는 해당 요소와 동위 관계에 있으며, 해당 요소보다 뒤에 존재하는 특정 타입의 요소를 모두 선택한다.
기본 문법
div ~ p { /* 속성 */ }
<p>이 p 태그는 div 태그의 sibling 이지만 div 태그보다 앞에 나옵니다!</p>
<div>
<p>이 p 태그는 div 태그의 child 입니다!</p>
<p>이 p 태그는 div 태그의 child 입니다!</p>
<p>이 p 태그는 div 태그의 child 입니다!</p>
</div>
<p>이 p 태그는 div 태그의 sibling 입니다!</p>
<p>이 p 태그는 div 태그의 sibling 입니다!</p>div {
border: 3px solid #F08080;
}
div ~ p {
background-color: #FFE4E1;
}
2) 인접 동위(형제) 선택자(adjacent sibling selector)
- 인접 동위 선택자는 해당 요소와 동위 관계에 있으며, 해당 요소의 바로 뒤에 존재하는 특정 타입의 요소를 모두 선택한다.
기본 문법
div + p { /* 속성 */ }
<div>
<p>이 p 태그는 div 태그의 sibling 입니다!</p>
<div>
<p>이 p 태그는 div 태그의 child 입니다!</p>
</div>
<p>이 p 태그는 div 태그 바로 뒤에 나오는 sibling 입니다!</p>
<p>이 p 태그는 div 태그의 sibling 입니다!</p>
</div>
<p>이 p 태그는 div 태그 바로 뒤에 나오는 sibling 입니다!</p>
<p>이 p 태그는 div 태그의 sibling 입니다!</p>div {
border: 3px solid #F08080;
}
div + p {
background-color: #FFE4E1;
}
FE Developer