nth-of-type
CSS 간단한 연습을 하고있었다.
|
1
2
3
4
5
6
7
|
<div id="foo">
<h2>단락 선택</h2>
<p>하나</p>
<p>둘</p>
<p>셋</p>
<p>얏!</p>
</div>
|
cs |
문제는 간단했다. p 태그 두번째것에 빨간색을 주는것이다.
절대 틀릴 수 없다는 자신감으로
div > p:nth-child(2) {
color : red;
}
를 썼다.
p를 잡고 자식을 걸었으니깐 둘에 색이 칠해져야하는거 아닐까?
라는 기대와는 다르게 하나에 색이 칠해졌다.
정답은
div > p:nth-of-type(2) {
color: red;
}
이다.
좀더 살펴보면
https://developer.mozilla.org/ko/docs/Web/CSS/:nth-child
:nth-child
CSS 의사 클래스 :nth-child(an+b)은 0 이상의 n에 대해서 도큐먼트 트리에서 자기 앞에 an+b-1 개의 형제가 있는 엘리먼트와 일치한다. 더 간단히 말하면 이 셀렉터는 일련의 형제들 중 순서가 an+b 패턴과 일치하는 몇 개의 자식 엘리먼트와 일치한다. 레벨 3 구현에서는 일치하는 엘리먼트의 부모가 있어야 하지만 레벨 4에서는 없어도 된다.
developer.mozilla.org
좀더 nth-child는 도큐먼트 트리의 형제의 순서를 선택한다.
도큐먼트 트리 형제의 타입을 선택하려면 nth-of-type을 써야한다.
https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-of-type
:nth-of-type()
The :nth-of-type() CSS pseudo-class matches elements of a given type, based on their position among a group of siblings.
developer.mozilla.org