CSS 인접 형제 선택자
인접 형제 선택자 +는
바로 위에 있는 형제 요소를 기준으로
요소를 선택할 수 있습니다.
문법
선택자1 + 선택자2 {
}
예제
h2 태그 바로 뒤에 위치하는 모든
p 태그를 선택하여 빨간색으로 칠해 봅시다:
<h2>text</h2>
<p>
+
</p>
<p>
-
</p>
<p>
-
</p>
h2 + p {
color: red;
}
:
예제
.test 클래스를 가진 요소 바로 뒤에 위치하는
모든 p 태그를 선택하여 빨간색으로 칠해 봅시다:
<p class="test">
text
</p>
<p>
+
</p>
<p>
-
</p>
.test + p {
color: red;
}
:
예제
.test 클래스를 가진 요소 바로 뒤에 위치하는
.elem 클래스를 가진 모든 요소를 선택하여
빨간색으로 칠해 봅시다:
<p class="test">
text
</p>
<p class="elem">
+
</p>
<p>
-
</p>
.test + .elem {
color: red;
}
:
