• 코드:
​x
 
1
<!DOCTYPE html>
2
<html lang="ko">
3
​
4
<head>
5
    <meta charset="UTF-8">
6
    <title>CSS Sibling Selectors</title>
7
    <style>
8
        div{ border: 3px solid #F08080; }
9
        div ~ p { background-color: #FFE4E1; }
10
    </style>
11
</head>
12
​
13
<body>
14
​
15
    <h1>일반 동위 선택자를 이용한 선택</h1>
16
    <p>이 p 태그는 div 태그의 sibling 이지만 div 태그보다 앞에 나옵니다!</p>
17
    <div>
18
        <p>이 p 태그는 div 태그의 child 입니다!</p>
19
        <p>이 p 태그는 div 태그의 child 입니다!</p>
20
        <p>이 p 태그는 div 태그의 child 입니다!</p>
21
    </div>
22
    <p>이 p 태그는 div 태그의 sibling 입니다!</p>
23
    <p>이 p 태그는 div 태그의 sibling 입니다!</p>
24
​
25
</body>
26
​
27
</html>