CSS에서 특정 요소의 형제 요소를 선택하는 방법을 알고 있으면, 스타일을 더욱 정교하게 조정할 수 있습니다. 이번 글에서는 CSS의 형제 선택자에 대해 자세히 알아보고, 실용적인 예제도 함께 살펴보겠습니다.
1. 형제 선택자란?
HTML 문서에서 같은 부모 요소를 가진 요소들을 “형제 요소”라고 합니다. CSS에서는 이러한 형제 요소를 선택할 수 있는 두 가지 형제 선택자가 있습니다.
- 인접 형제 선택자 (
+): 바로 다음에 오는 형제 요소를 선택합니다. - 일반 형제 선택자 (
~): 특정 요소 다음에 위치하는 모든 형제 요소를 선택합니다.
2. 인접 형제 선택자 (+)
+ 선택자는 특정 요소 바로 뒤에 오는 형제 요소 하나만 선택합니다.
예제
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>인접 형제 선택자 예제</title>
<style>
h1 + p {
color: blue;
font-weight: bold;
}
</style>
</head>
<body>
<h1>제목입니다</h1>
<p>이 문장은 파란색으로 표시됩니다.</p>
<p>이 문장은 스타일이 적용되지 않습니다.</p>
</body>
</html>
설명
h1 + p선택자는<h1>바로 다음에 오는<p>요소 하나만 선택하여 스타일을 적용합니다.- 두 번째
<p>요소는 스타일이 적용되지 않습니다.
3. 일반 형제 선택자 (~)
~ 선택자는 특정 요소 다음에 위치하는 모든 형제 요소를 선택합니다.
예제
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>일반 형제 선택자 예제</title>
<style>
h1 ~ p {
color: red;
font-style: italic;
}
</style>
</head>
<body>
<h1>제목입니다</h1>
<p>이 문장은 빨간색으로 표시됩니다.</p>
<p>이 문장도 빨간색으로 표시됩니다.</p>
</body>
</html>
설명
h1 ~ p선택자는<h1>다음에 나오는 모든<p>요소에 스타일을 적용합니다.- 따라서 모든
<p>요소가 빨간색이 됩니다.
4. 인접 형제 선택자와 일반 형제 선택자의 차이점
| 선택자 | 적용 범위 |
|---|---|
+ (인접 형제 선택자) | 특정 요소 바로 다음 형제 하나만 선택 |
~ (일반 형제 선택자) | 특정 요소 다음에 나오는 모든 형제 요소 선택 |
5. 인접 형제 선택자와 리스트 (ul li)
li + li를 사용하면 모든 <li>가 선택되는 것처럼 보일 수 있지만, 사실 각 <li> 바로 뒤에 오는 <li>만 선택됩니다.
예제
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>인접 형제 선택자 테스트</title>
<style>
li + li {
color: red;
}
</style>
</head>
<body>
<ul>
<li>첫 번째 항목</li>
<li>두 번째 항목 (빨간색)</li>
<li>세 번째 항목 (빨간색)</li>
<li>네 번째 항목 (빨간색)</li>
</ul>
</body>
</html>
설명
li + li선택자는 각<li>바로 뒤에 있는<li>하나만 선택합니다.- 첫 번째
<li>는 선택되지 않지만, 그 뒤에 오는 두 번째, 세 번째, 네 번째<li>는 각각 앞의<li>의 바로 뒤이므로 선택됩니다.
만약 모든 <li>를 한꺼번에 선택하고 싶다면 ul li 또는 일반 형제 선택자(~)를 사용할 수도 있습니다.
ul li {
color: red;
}
이렇게 하면 모든 <li>가 빨간색이 됩니다. 😊
6. 실용적인 활용 예제
메뉴 항목 디자인
형제 선택자를 이용하여 특정 메뉴 항목이 활성화되었을 때, 다음 메뉴 항목에 스타일을 적용할 수 있습니다.
.menu-item.active + .menu-item {
background-color: yellow;
}
마우스 호버 효과
마우스를 특정 요소에 올렸을 때, 그 다음 형제 요소에 효과를 줄 수 있습니다.
div:hover + p {
color: green;
font-weight: bold;
}
7. 마무리
CSS 형제 선택자는 특정 요소의 바로 뒤에 오는 형제 요소(+)와 모든 형제 요소(~)를 선택하는 강력한 기능을 제공합니다. 이를 활용하면 보다 유연한 스타일링이 가능하니, 다양한 상황에서 적극 활용해 보세요!