[CSS] 형제 선택자 + , ~ 사용법

FRONTEND/CSS

[CSS] 형제 선택자 + , ~ 사용법

녜힝 2022. 5. 12. 17:45

🤔 인접 형제 선택자 +

인접형제선택자는 바로 뒤에 있는 요소 단 한 개를 선택합니다.

A + B {
    ···
}

A와 B가 같은 계층에 있을 때 (형제요소일때) A 바로 뒤에 있는 B를 선택자로 지정합니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>형제선택자</title>
    <style>
        h1 + p {
            background-color: rgb(208, 112, 184);
            color: #fff;
        }
    </style>
</head>
<body>
    <h1>색상표</h1>
    <p>RED</p>
    <p>YELLOW</p>
    <p>GREEN</p>
    <p>BLUE</p>
    <p>BLACK</p>
</body>
</html>

위 예제의 결과로 h1 태그 바로 뒤에 있는 p 태그 한 개가 선택된 것을 확인할 수 있습니다.

🤔 일반 형제 선택자 ~

일반형제선택자는 뒤에 있는 모든 같은 요소를 동시에 선택합니다.

A ~ B {
    ···
}

A와 B가 같은 계층에 있을 때 (형제요소일때) A 뒤에 있는 모든 B를 선택자로 지정합니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>형제선택자</title>
    <style>
        h1 ~ p {
            background-color: rgb(208, 112, 184);
            color: #fff;
        }
    </style>
</head>
<body>
    <h1>색상표</h1>
    <p>RED</p>
    <p>YELLOW</p>
    <p>GREEN</p>
    <p>BLUE</p>
    <p>BLACK</p>
</body>
</html>

위 예제의 결과로 h1 태그 뒤에 있는 모든 p 태그가 선택된 것을 확인할 수 있습니다.