CSS의 형제 선택자
형제 선택자 ~는 동일한 부모 안에서
지정된 요소 이후에 위치한 모든 요소를
선택할 수 있게 합니다.
문법
선택자1 ~ 선택자2 {
}
예시
h2 태그 이후에 위치한 모든 p 태그를
찾아 빨간색으로 칠해 봅시다:
<div>
<h2>text</h2>
<p>
+
</p>
<p>
+
</p>
<p>
+
</p>
</div>
<p>
-
</p>
h2 ~ p {
color: red;
}
:
예시
.test 클래스를 가진 요소 이후에 위치한
모든 p 태그를 찾아 빨간색으로 칠해 봅시다:
<div>
<p class="test">
text
</p>
<p>
+
</p>
<p>
+
</p>
</div>
<p>
-
</p>
.test ~ p {
color: red;
}
:
예시
.test 클래스를 가진 요소 이후에 위치한
모든 .elem 클래스를 가진 요소를 찾아
빨간색으로 칠해 봅시다:
<div>
<p class="test">
text
</p>
<p class="elem">
+
</p>
<p>
-
</p>
<p class="elem">
+
</p>
</div>
<p>
-
</p>
.test ~ .elem {
color: red;
}
:
함께 보기
-
자식 선택자,
직계 자식 관계를 기준으로 요소를 선택할 수 있게 합니다. -
하위 선택자(컨텍스트 선택자),
부모 요소를 기준으로 하위 요소를 선택할 수 있게 합니다. -
인접 형제 선택자,
바로 다음에 오는 형제 요소를 선택할 수 있게 합니다. -
전체 선택자,
모든 요소를 선택할 수 있게 합니다.
