• 코드:
​x
 
1
<!DOCTYPE html>
2
<html lang="ko">
3
​
4
<head>
5
    <meta charset="UTF-8">
6
    <title>CSS Structural Selectors</title>
7
    <style>
8
        div{ border: 3px solid #008000; }
9
        p:only-child {
10
            color: red;
11
            font-weight: bold;
12
        }
13
    </style>
14
</head>
15
​
16
<body>
17
​
18
    <h1>:only-child를 이용한 선택</h1>
19
    <div>
20
        <p>이 p 태그는 div 태그의 유일한 child 입니다!</p>
21
    </div>
22
    <div>
23
        <p>이 p 태그는 div 태그의 첫 번째 child 입니다!</p>
24
        <p>이 p 태그는 div 태그의 두 번째 child 입니다!</p>
25
    </div>
26
    <div>
27
        <p>이 p 태그는 div 태그의 첫 번째 child 입니다!</p>
28
        <p>이 p 태그는 div 태그의 두 번째 child 입니다!</p>
29
        <p>이 p 태그는 div 태그의 세 번째 child 입니다!</p>
30
    </div>
31
    <div>
32
        <p>이 p 태그는 div 태그의 유일한 child 입니다!</p>
33
    </div>
34
​
35
</body>
36
​
37
</html>