nth-child()과 nth-of-type()

Notice

Recent Posts

Recent Comments

Link

« 2024/05 »
일	월	화	수	목	금	토
			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	30	31

Tags more

Archives

Today

Total

관리 메뉴

codingfarm

nth-child()과 nth-of-type() 본문

web/CSS3

nth-child()과 nth-of-type()

scarecrow1992 2020. 10. 2. 15:27

nth-child()

n번째 자손중 타입이 일치하는 것만 선택한다.

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
30
31

<!DOCTYPE html>
<html>
<head>
<style> 
p:nth-child(3) {
  background: red;
}
</style>
</head>
<body>
 
<header>
  <h1>The first paragraph.</h1>
  <h1>The second paragraph.</h1>
  <p>The third paragraph.</p>
  <p>The fourth paragraph.</p>
  <p>The fifth paragraph.</p>
</header>
 
<br>
 
<footer>
  <h1>The first paragraph.</h1>
  <p>The second paragraph.</p>
  <p>The third paragraph.</p>
  <p>The fourth paragraph.</p>
  <p>The fifth paragraph.</p>
</footer>
</body>
</html>
 
Colored by Color Scripter

cs

header와 footer내에 h1과 p 태그들이 존재하며 무조건 3번째 태그만을 선택해 배경을 붉은색으로 바꾸고 있다.

만약 3번째 태그가 p가 아니라면 어떤 변화도 없을것이다.

nth-of-type()

해당 타입의 태그중 n번째의 것을 선택한다.

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
30

<!DOCTYPE html>
<html>
<head>
<style> 
p:nth-of-type(3) {
  background: red;
}
</style>
</head>
<body>
 
<header>
  <h1>The first paragraph.</h1>
  <h1>The second paragraph.</h1>
  <p>The third paragraph.</p>
  <p>The fourth paragraph.</p>
  <p>The fifth paragraph.</p>
</header>
 
<br>
 
<footer>
  <h1>The first paragraph.</h1>
  <p>The second paragraph.</p>
  <p>The third paragraph.</p>
  <p>The fourth paragraph.</p>
  <p>The fifth paragraph.</p>
</footer>
</body>
</html>

cs