• 코드:
​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.first{ border: 3px solid #008000; }
9
        div.second{ border: 3px solid #FFD700; }
10
        p:nth-of-type(2n) {
11
            color: red;
12
            font-weight: bold;
13
        }
14
    </style>
15
</head>
16
​
17
<body>
18
​
19
    <h1>:nth-of-type을 이용한 선택</h1>
20
    <div class="first">
21
        <p>이 p 태그는 div 태그의 child 요소 중에서 첫 번째로 등장하는 p 태그입니다!</p>
22
        <div>이 div 태그는 div 태그의 child 요소 중에서 첫 번째로 등장하는 div 태그입니다!</div>
23
        <p>이 p 태그는 div 태그의 child 요소 중에서 두 번째로 등장하는 p 태그입니다!</p>
24
        <div>이 div 태그는 div 태그의 child 요소 중에서 두 번째로 등장하는 div 태그입니다!</div>
25
        <p>이 p 태그는 div 태그의 child 요소 중에서 세 번째로 등장하는 p 태그입니다!</p>
26
        <div>이 div 태그는 div 태그의 child 요소 중에서 세 번째로 등장하는 div 태그입니다!</div>
27
        <p>이 p 태그는 div 태그의 child 요소 중에서 네 번째로 등장하는 p 태그입니다!</p>
28
        <div>이 div 태그는 div 태그의 child 요소 중에서 네 번째로 등장하는 div 태그입니다!</div>
29
    </div>
30
​
31
</body>
32
​
33
</html>