CSS 선택자(Selector) 정리
CSS 선택자는 특정 HTML 요소를 선택하여 스타일을 적용할 수 있도록 도와준다.선택자는 단순한 태그 선택부터 복잡한 관계 설정까지 가능하며, 우선순위에 따라 스타일이 결정된다. 1. 기본 선
jyhan0625.tistory.com
0. 먼저 풀어보기
해당 CSS 코드의 적용 결과는?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
#div-p > p:nth-child(2) {
color:red;
}
</style>
</head>
<body>
<div id="div-p">
<h1>안녕하세요</h1>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
</div>
</body>
</html>
2가 빨강색으로 적용될까? 아니다, 1이 빨강색으로 적용되었다.
1. <p>1</p>에 적용된 이유
코드에서 #div-p > p:nth-child(2) 선택자가 원하는 <p>2</p>가 아니라 <p>1</p>에 적용된 이유는 :nth-child(n)이 요소의 유형과 관계없이 부모의 모든 자식 요소를 기준으로 순서를 세기 때문이다.
#div-p > p:nth-child(2) {
color: red;
}#div-p 내부의 직계 자식 중 두 번째(2) 위치에 있는 요소. 단, 그 요소가 <p>여야 적용됨.
<div id="div-p">
<h1>안녕하세요</h1> <!-- 첫 번째 자식 (1) -->
<p>1</p> <!-- 두 번째 자식 (2) ✅ -->
<p>2</p> <!-- 세 번째 자식 (3) -->
<p>3</p> <!-- 네 번째 자식 (4) -->
<p>4</p> <!-- 다섯 번째 자식 (5) -->
</div>#div-p의 모든 직계 자식을 순서대로 보면:
1️⃣ <h1>
2️⃣ <p>1</p> ✅ (nth-child(2) 조건 충족)
3️⃣ <p>2</p>
4️⃣ <p>3</p>
5️⃣ <p>4</p>
💡 즉, 두 번째(nth-child(2)) 요소는 <p>1</p>이므로, 해당 요소가 빨간색이 됨.
2. 그럼 <p> 태그만을 기준으로 두 번째 요소를 선택하려면?
p 태그만을 기준으로 두 번째 요소를 선택하려면 nth-of-type()을 사용하면 된다.
🔹 올바른 코드 (nth-of-type(2))
#div-p > p:nth-of-type(2) {
color: red;
}
✅ nth-of-type(2)는 같은 부모를 가진 모든 <p> 태그 중에서 두 번째 요소를 선택한다.
3. 정리
| 선택자 | 설명 |
| nth-child(n) | 부모의 모든 자식 요소 중에서 n번째 요소 선택 (요소 유형 무관) |
| nth-of-type(n) | 같은 부모의 특정 태그(p 등) 중에서 n번째 요소 선택 |
✅ 결론: nth-child(2)가 아니라 nth-of-type(2)을 사용해야 <p>2</p>가 빨간색이 된다.
'BACKEND [Kamranahmedse Roadmap] > CSS' 카테고리의 다른 글
| [CSS] CSS Layout Practice 1 (0) | 2025.02.02 |
|---|---|
| [CSS] CSS 레이아웃(Layout) 기법 정리 (0) | 2025.02.02 |
| [CSS] CSS 선택자(Selector) 정리 (0) | 2025.02.01 |
| [CSS] 상속 (Inheritance) 개념과 특징 (0) | 2025.02.01 |
| [CSS] CSS 반영 우선순위 (Cascading Order): inline, internal, external (0) | 2025.02.01 |