본문 바로가기

programming

nth-of-type, nth-child

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html>
<head>
<style> 
  div > p:nth-of-type(2) {
    background: red;
  }
  
  div > p:nth-child(2){
    background: yellow;
  }
 
  
</style>
</head>
<body>
 
  <div>
  <h2>test</h2>
  <p>The first paragraph.</p>
  <p>The second paragraph.</p>
  <p>The third paragraph.</p>
  <p>The fourth paragraph.</p>
  
</div>
 
</body>
</html>
 
cs