CSS의 인접 형제 선택자(adjacent sibling selector)는 특정 요소 바로 뒤에 이어지는 형제 요소를 선택할 때 사용합니다. 여기서 중요한 점은, 선택되는 요소는 반드시 첫 번째 선택자에 해당하는 요소와 같은 부모를 공유하면서 그 바로 다음 순서에 위치해야 한다는 것입니다. 사이에 다른 요소가 끼어 있으면 더 이상 '인접'하지 않기 때문에 선택되지 않습니다.
문법
CSS 인접 형제 선택자의 기본 문법은 다음과 같습니다. 두 선택자 사이를 더하기 기호(+)로 연결합니다.
element + element {
/* 선언부 */
}예제 1 – div 요소에 적용하기
다음 예제는 인접 형제 선택자가 어떻게 동작하는지 보여줍니다. div + div 규칙은 '앞에 div 요소가 바로 이어지는 div'에만 스타일을 적용합니다.
<!DOCTYPE html>
<html>
<head>
<style>
div {
margin: 8px;
height: 50px;
width: 60px;
display: flex;
float: left;
border-radius: 5%;
border: 2px solid brown;
box-shadow: inset 0 2px 12px olivedrab;
}
div + div {
border-radius: 50%;
background-color: orchid;
}
</style>
</head>
<body>
<div></div>
<hr>
<div></div>
<div></div>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같은 결과가 출력됩니다.
핵심 포인트: 첫 번째 div와 두 번째 div 사이에 <hr> 요소가 있기 때문에, 두 번째 div는 앞의 div와 '인접'하지 않습니다. 따라서 div + div 스타일이 적용되는 것은 세 번째 div뿐입니다. 이처럼 인접 형제 선택자는 중간에 다른 요소가 끼면 효과가 끊긴다는 점을 기억해 두세요.
예제 2 – span 요소에 적용하기
이번에는 인라인 요소인 span에 인접 형제 선택자를 적용해 보겠습니다. span + span 규칙에 의해 두 번째 span에만 배경색이 변경됩니다.
<!DOCTYPE html>
<html>
<head>
<style>
p {
font-size: 1.5em;
}
span {
background-color: lavender;
}
span + span {
background-color: darkseagreen;
}
</style>
</head>
<body>
<p>
<span>데모 텍스트</span> <span>여기에 표시됩니다</span>
</p>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같은 결과가 출력됩니다.
두 span 사이에 공백 문자가 있지만, 공백은 요소가 아니므로 인접 관계에는 영향을 주지 않습니다. 따라서 두 번째 span에만 darkseagreen 배경색이 적용된 것을 확인할 수 있습니다.