CSS의 일반 형제 선택자(general sibling selector)는 특정 요소 뒤에 위치하는 모든 형제 요소를 선택하는 데 사용됩니다. 이때 두 요소는 반드시 같은 부모 요소를 공유해야 합니다. 인접 형제 선택자(+)가 바로 다음에 오는 하나의 요소만 선택하는 것과 달리, 물결표(~)를 사용하면 뒤따르는 모든 해당 요소가 한꺼번에 스타일링됩니다.
기본 문법
CSS 일반 형제 선택자의 기본 문법은 다음과 같습니다.
element ~ element {
/* 선언부 */
}물결표(~) 기호를 기준으로, 앞쪽 요소 이후에 등장하는 동일한 부모를 가진 형제 요소들이 모두 선택됩니다. 아래 예제를 통해 실제 동작 방식을 확인해 보겠습니다.
예제 1: p ~ ul 선택자 활용하기
<!DOCTYPE html>
<html>
<head>
<style>
* {
float: left;
padding-left: 14px;
list-style: none;
}
p ~ ul {
box-shadow: inset 4px 0 3px lime;
}
</style>
</head>
<body>
<ul>
<li><img src="https://www.tutorialspoint.com/images/pl-sql.png"></li>
</ul>
<p>We provide learning tutorials, quizzes and video tutorials.</p>
<ul>
<li>Tutorials on databases and programming languages.</li>
<li>Quizzes to check knowledge of databases and languages.</li>
<li>Video Tutorials to easily understand the technologies.</li>
</ul>
<ul>
<li><img src="https://www.tutorialspoint.com/images/mongodb.png"></li>
<li><img src="https://www.tutorialspoint.com/images/db2.png"></li>
<li><img src="https://www.tutorialspoint.com/images/sql.png"></li>
</ul>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
<p> 태그보다 뒤에 위치한 두 개의 ul 요소에만 라임색 내부 그림자(box-shadow)가 적용된 것을 확인할 수 있습니다. 맨 앞의 ul은 p 요소보다 먼저 나오기 때문에 선택되지 않습니다.
예제 2: img ~ p 선택자 활용하기
<!DOCTYPE html>
<html>
<head>
<style>
* {
float: left;
padding: 10px;
list-style: none;
}
img ~ p {
background-color: burlywood;
}
</style>
</head>
<body>
<p>This is demo text.</p>
<img src="https://www.tutorialspoint.com/big_data_analytics/images/big-data-analytics-mini-logo.jpg">
<p>Learn Big Data Analytics at no cost.</p>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
img 요소보다 나중에 등장한 p 요소에만 버터색(burlywood) 배경이 적용됩니다. 이미지 앞에 있는 첫 번째 p 요소는 선택 대상에서 제외되는 점이 핵심입니다.
인접 형제 선택자(+)와의 차이점
일반 형제 선택자(~)는 자주 헷갈리는 인접 형제 선택자(+)와 비교하면 이해하기 쉽습니다.
- 일반 형제 선택자(A ~ B): A 뒤에 오는 모든 B 형제 요소를 선택합니다.
- 인접 형제 선택자(A + B): A 바로 다음에 오는 첫 번째 B 요소 하나만 선택합니다.
따라서 여러 개의 후속 요소를 한 번에 스타일링해야 할 때는 ~ 선택자를, 특정 순서의 단 하나의 요소만 지정하고 싶을 때는 + 선택자를 사용하는 것이 좋습니다.