CSS - 문제 미리보기
문제 1286
medium
다음 CSS에서 실제로 스타일이 적용되는 요소는?
```css
p:first-child {
color: blue;
}
```
```html
<div>
<h1>제목</h1>
<p>첫 번째 단락</p>
<p>두 번째 단락</p>
</div>
<section>
<p>세 번째 단락</p>
<span>기타 요소</span>
</section>
```
```css
p:first-child {
color: blue;
}
```
```html
<div>
<h1>제목</h1>
<p>첫 번째 단락</p>
<p>두 번째 단락</p>
</div>
<section>
<p>세 번째 단락</p>
<span>기타 요소</span>
</section>
```
정답: B
first-child pseudo-class의 정확한 동작:
:first-child의 엄격한 조건:
• 해당 요소가 부모의 첫 번째 자식이어야 함
• 요소 타입과 위치 조건을 동시에 만족해야 함
각 요소별 분석:
첫 번째 단락 (`<p>첫 번째 단락</p>`):
• div의 자식이지만 두 번째 자식 (h1이 첫 번째)
• p 요소이지만 first-child 조건 불만족 ✗
두 번째 단락 (`<p>두 번째 단락</p>`):
• div의 세 번째 자식
• first-child 조건 불만족 ✗
세 번째 단락 (`<p>세 번째 단락</p>`):
• section의 첫 번째 자식 ✓
• p 요소 조건도 만족 ✓
• 스타일 적용됨
:first-child의 엄격한 조건:
• 해당 요소가 부모의 첫 번째 자식이어야 함
• 요소 타입과 위치 조건을 동시에 만족해야 함
각 요소별 분석:
첫 번째 단락 (`<p>첫 번째 단락</p>`):
• div의 자식이지만 두 번째 자식 (h1이 첫 번째)
• p 요소이지만 first-child 조건 불만족 ✗
두 번째 단락 (`<p>두 번째 단락</p>`):
• div의 세 번째 자식
• first-child 조건 불만족 ✗
세 번째 단락 (`<p>세 번째 단락</p>`):
• section의 첫 번째 자식 ✓
• p 요소 조건도 만족 ✓
• 스타일 적용됨
💡 학습 팁
이 문제를 포함한 CSS 과목의 모든 문제를 순차적으로 풀어보세요. 진행상황이 자동으로 저장되어 언제든지 이어서 학습할 수 있습니다.