• 코드:
​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
        <p>div 태그 내부의 p 태그만 선택됩니다!</p>
21
    </div>
22
    <p>div 태그 외부의 p 태그는 선택되지 않습니다.</p>
23
​
24
</body>
25
​
26
</html>