• 코드:
​x
 
1
<!DOCTYPE html>
2
<html lang="ko">
3
​
4
<head>
5
    <meta charset="UTF-8">
6
    <title>CSS Combinators</title>
7
    <style>
8
        div{ border: 3px solid #CD853F; }
9
        div > p { background-color: #FFEFD5; }
10
    </style>
11
</head>
12
​
13
<body>
14
​
15
    <h1>자식 선택자를 이용한 선택</h1>
16
    <p>div 태그 외부의 p 태그는 선택되지 않습니다.</p>
17
    <div>
18
        <p>div 태그 바로 밑에 존재하는 p 태그만 선택됩니다!</p>
19
        <p>div 태그 바로 밑에 존재하는 p 태그만 선택됩니다!</p>
20
        <span>
21
            <p>이 p 태그는 span 태그로 둘러 쌓여 있습니다.<br>
22
                따라서 div 태그 바로 밑에 존재하는 p 태그가 아니므로 선택되지 않습니다!
23
            </p>
24
        </span>
25
    </div>
26
    <p>div 태그 외부의 p 태그는 선택되지 않습니다.</p>
27
​
28
</body>
29
​
30
</html>