CSS에서 인접 형제 선택자(adjacent sibling selector), 즉 element + element 형태를 사용하면 지정된 요소가 나온 직후 바로 다음에 위치한 요소만 선택할 수 있습니다. 예를 들어 div + p는 <div> 요소 뒤에 바로 이어지는 첫 번째 <p> 요소에만 스타일을 적용합니다.
인접 형제 선택자란?
인접 형제 선택자는 두 요소가 같은 부모를 공유하고, 앞의 요소 바로 다음에 뒤의 요소가 위치할 때만 일치합니다. 만약 <div>와 <p> 사이에 다른 요소가 끼어 있다면 해당 <p>는 선택되지 않습니다.
예제 코드
아래 코드는 div + p 선택자를 활용하여 <div> 바로 뒤에 오는 <p> 요소의 글자색을 흰색으로, 배경색을 파란색으로 지정하는 예입니다.
<!DOCTYPE html>
<html>
<head>
<style>
div + p {
color: white;
background-color: blue;
}
</style>
</head>
<body>
<h1>Demo Website</h1>
<h2>Fruits</h2>
<div>
<p>This is demo text.</p>
</div>
<p>Fruits are good for health.</p>
<p>Fruits makes you healthy.</p>
</body>
</html>실행 결과 설명
위 코드를 실행하면 다음과 같은 결과를 확인할 수 있습니다.
<div>내부에 있는This is demo text.문단은<div>의 자식 요소이므로 스타일이 적용되지 않습니다.<div>바로 뒤에 위치한Fruits are good for health.문단은 흰색 글자와 파란색 배경이 적용됩니다.- 마지막 문단인
Fruits makes you healthy.는<div>바로 다음에 오는 요소가 아니기 때문에 스타일 대상에서 제외됩니다.
참고: 일반 형제 선택자(~)와의 차이
+(인접 형제 선택자)는 바로 다음에 오는 하나의 요소만 선택하지만, ~(일반 형제 선택자)는 앞의 요소 이후에 나오는 모든 동생 요소를 선택합니다. 특정 위치의 단 하나의 요소만 스타일링하고 싶다면 +를, 여러 요소를 한 번에 지정하려면 ~를 사용하는 것이 좋습니다.