CSS의 일반 형제 선택자(General Sibling Selector, ~)를 사용하면 <p> 요소 뒤에 위치하는 모든 <ul> 요소를 한 번에 선택할 수 있습니다. 선택자를 p ~ ul처럼 작성하면, 같은 부모 요소를 공유하면서 <p> 요소 이후에 등장하는 모든 <ul> 요소에 동일한 스타일이 적용됩니다.
일반 형제 선택자(~)란?
일반 형제 선택자는 물결표(~) 기호로 표현합니다. 기준 요소와 형제 관계에 있는 요소 중에서 기준 요소 뒤에 나오는 모든 대상 요소를 선택한다는 점이 특징입니다. 바로 인접한 요소 하나만 선택하는 인접 형제 선택자(+)와 달리, 이후에 등장하는 모든 형제 요소에 스타일을 적용할 수 있습니다.
예제 코드
아래 코드를 실행하면 <p> 요소 뒤에 오는 모든 <ul> 요소에 파란색 배경과 흰색 글자가 적용되는 것을 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<style>
p~ul {
color: white;
background-color: blue;
}
</style>
</head>
<body>
<h1>Demo Website</h1>
<h2>Fruits</h2>
<div>
<p>Vegetables are good for health.</p>
<ul>
<li>Spinach</li>
<li>Onion</li>
<li>Capsicum</li>
</ul>
</div>
<p>Fruits are good for health.</p>
<ul>
<li>Apple</li>
<li>Orange</li>
<li>Kiwi</li>
</ul>
</body>
</html>실행 결과 설명
위 예제에서는 두 곳에서 <p> 요소 뒤에 <ul> 요소가 등장합니다. 첫 번째는 "Vegetables are good for health." 문단 뒤의 채소 목록(시금치, 양파, 피망)이고, 두 번째는 "Fruits are good for health." 문단 뒤의 과일 목록(사과, 오렌지, 키위)입니다.
p ~ ul 선택자 덕분에 이 두 <ul> 요소가 모두 선택되어, 각각 파란색 배경 위에 흰색 글자로 표시됩니다. 만약 인접 형제 선택자(p + ul)를 사용했다면 결과는 동일하게 보일 수 있지만, <p>와 <ul> 사이에 다른 요소가 삽입되면 일반 형제 선택자(~)는 여전히 작동하는 반면 인접 형제 선택자(+)는 더 이상 매칭되지 않는다는 차이가 있습니다.