CSS 형제 선택자 – Today, lotto

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 형제 선택자는 특정 요소의 바로 뒤에 오는 형제 요소(+)와 모든 형제 요소(~)를 선택하는 강력한 기능을 제공합니다. 이를 활용하면 보다 유연한 스타일링이 가능하니, 다양한 상황에서 적극 활용해 보세요!

1. 형제 선택자란?

2. 인접 형제 선택자 (+)

예제

설명

3. 일반 형제 선택자 (~)

예제

설명