CSS 형제 요소 선택자 완벽 정리: 인접 형제(+)와 일반 형제(~) 선택자 활용법

CSS에서 형제 요소를 선택하는 방법은 크게 두 가지가 있습니다. 바로 인접 형제 결합자(+)와 일반 형제 결합자(~)입니다. 두 선택자 모두 같은 부모 요소를 공유하는 형제 관계의 요소를 대상으로 하지만, 선택 범위에 중요한 차이가 있습니다.

인접 형제 선택자 (+)

인접 형제 선택자는 첫 번째 선택자로 지정한 요소의 바로 다음에 위치한 요소만 매칭하고 싶을 때 사용합니다. 이때 두 선택자는 반드시 동일한 부모 요소를 가진 형제 관계여야 합니다.

CSS 인접 형제 결합자의 기본 문법은 다음과 같습니다.

Selector + Selector {
    속성: /*값*/
}

일반 형제 선택자 (~)

반면, 두 번째 요소의 위치와 상관없이 같은 부모를 가진 모든 형제 요소를 선택하고 싶다면 일반 형제 결합자를 사용합니다. 즉, 기준 요소 뒤에 나오는 해당 태그 전체가 스타일이 적용됩니다.

CSS 일반 형제 결합자의 기본 문법은 다음과 같습니다.

Selector ~ Selector {
    속성: /*값*/
}

아래 예제들을 통해 인접 형제 선택자와 일반 형제 선택자의 동작 방식을 자세히 살펴보겠습니다.

예제 1: 인접 형제 선택자(div + p)

<!DOCTYPE html>
<html>
<head>
<style>
#parent {
   display: flex;
   margin: 2%;
   padding: 2%;
   box-shadow: inset 0 0 24px cyan;
   justify-content: space-around;
}
div + p {
   font-size: 1.2em;
   font-weight: bold;
   background: powderblue;
}
section {
   box-shadow: 0 0 3px rgba(0,0,0,0.8);
}
</style>
</head>
<body>
<div id="parent">
<img src="https://i.picsum.photos/id/616/200/200.jpg?hmac=QEzyEzU6nVn4d_vdALhsT9UAtTUEVhwrT-kM5ogBqKM" />
<div>
<p>Check this</p>
<section><p>Some text in section</p></section>
<span>hello</span>
</div>
<p>Selected</p>
</div>
</body>
</html>

실행 결과

위 코드를 실행하면 div 요소 바로 뒤에 위치한 p 요소("Selected")에만 스타일이 적용되어 파란 배경과 굵은 글씨로 표시됩니다. 반면 div 내부에 있는 "Check this" 문단은 div의 직계 자식이므로 선택되지 않습니다.

예제 2: 일반 형제 선택자(section ~ p)

<!DOCTYPE html>
<html>
<head>
<style>
#parent {
   display: flex;
   margin: 2%;
   padding: 2%;
   background: thistle;
   justify-content: space-between;
}
section ~ p {
   text-align: center;
   font-size: 1.2em;
   font-weight: bold;
   background: lavender;
}
</style>
</head>
<body>
<div id="parent">
<img src="https://i.picsum.photos/id/616/200/200.jpg?hmac=QEzyEzU6nVn4d_vdALhsT9UAtTUEVhwrT-kM5ogBqKM" />
<div>
<p>Random text 1</p>
<section><p>Some text in section</p></section>
<span>hello</span>
<p>Selected</p>
</div>
<img src="https://i.picsum.photos/id/1035/200/200.jpg?hmac=IDuYUZQ_7a6h4pQU2k7p2nxTMjMt4uy-p3ze94KtA4" />
</div>
</body>
</html>

실행 결과

이번 예제에서는 section 요소 뒤에 나오는 모든 p 요소가 선택됩니다. 따라서 section보다 앞에 있는 "Random text 1"은 스타일이 적용되지 않지만, 그 뒤에 위치한 "Selected" 문단은 위치 간격과 무관하게 라벤더 배경과 굵은 글씨 스타일이 적용됩니다.

정리

인접 형제 선택자(+): 기준 요소 바로 다음에 오는 단 하나의 형제 요소만 선택
일반 형제 선택자(~): 기준 요소 이후에 나오는 모든 동일 형제 요소 선택

두 선택자를 상황에 맞게 활용하면 불필요한 클래스나 ID 추가 없이도 HTML 구조만으로 원하는 요소를 정교하게 스타일링할 수 있습니다.