인접 형제 선택자
Coddy의 CSS 선택자 코스 레슨 — 15개 중 9번째.
인접 형제 선택자(adjacent sibling selectors)에 대해 알아봅시다. 이 선택자는 동일한 부모를 공유하며 선택된 요소 바로 뒤에 오는 요소를 대상으로 합니다. 인접 형제 선택자는 지정된 요소의 형제이면서 그 요소에 바로 인접한 모든 요소를 선택하는 CSS 선택자입니다. 인접 형제 선택자는 두 선택자 사이에 더하기 기호(+)를 사용하여 표시합니다.
구문
former_element + target_element {
/* style properties */
}다음과 같은 HTML 구조가 있다고 가정해 봅시다:
<div class="container">
<p>First paragraph</p>
<span>Adjacent span</span>
<p>Second paragraph</p>
</div>단락(paragraph) 바로 뒤에 오는 <span>의 스타일을 지정하려면 인접 형제 선택자를 사용합니다:
p + span {
font-weight: bold;
}이 경우, "Adjacent span"은 굵은 글꼴 두께를 갖게 됩니다.
챌린지
쉬움p요소와span요소를 포함하는 웹 페이지를 만드세요.- 인접 형제 선택자를 사용하여
p요소 바로 다음에 오는span요소가 빨간색 테두리를 가지도록 스타일을 지정하세요.
직접 해보기
<html>
<head>
<title>Adjacent Sibling Selector Exercise</title>
<style>
/* CSS Code goes here */
</style>
</head>
<body>
</body>
</html>