🔥nth-child 가 이상해!
<body>
<div>div 1</div>
<div>div 2</div>
<span>span 1</span>
<span>span 2</span>
<div>div 3</div>
<div>div 4</div>
</body>위와 같은 html 문서가 있습니다.
여기서,
<div>div 3</div>에 배경색을 노랑색으로 깔고 싶어! 라고 한다면
div:nth-child(3) {
background-color: yellow;
}라고 하면 되겠죠?
결과를 볼까요...
❓❓❓
우리의 예상과는 다르게 전혀 적용이 안 되었습니다.
뭐야?? 왜지??? 전체 div 중에 3번째니까 div:nth-child(3) 하면
3번째 div 에 적용되어야 하는거 아닌가?!
라고 생각했다면, nth-child() 의 개념에 대해 잘못 알고있는 것입니다.
nth-child 에 대해 자세히 알아봅시다.
📌 순서 먼저, 태그는 나중에
위와 같이 오해를 하는 이유는, 우리가 무의식적으로
div:nth-child(3) 하면 모든 div 를 찾고, 그 중에 3번째를 고르겠지?
라고 생각하고 있기 때문입니다.
하지만, 실제 동작을 보면 반대라는 것을 알 수 있습니다.
자식 중에 3번째를 찾고, 그 3번째 자식이 div 라면 속성이 적용됩니다.
즉, div 중 3번째 자식이 아니라 3번째 자식 중 div 를 찾는 것입니다.
브라우저: nth-child(3) 이라니까 3번째에 해당하는 자식을 찾자! 세 번째는 span 이네?
브라우저: 아니...div:nth-child(3) 라고 썼는데 3번째 자식 span 인데? div 아닌데? span 아니면 속성 적용 안해야지~
이렇게 됩니다.
위의 사항을 숙지하고, nth-child() 를 이용하려면 다음과 같이 생각해야 합니다.
<body>
<div>div 1</div> //1번째 자식
<div>div 2</div> //2번째 자식
<span>span 1</span> //3번째 자식
<span>span 2</span> //4번째 자식
<div>div 3</div> //5번째 자식
<div>div 4</div> //6번째 자식
</body>우리가 속성을 적용하려는 div 3 는 body 의 5번째 자식이군요.
nth-child(5) 을 하면 5번째 자식을 찾아가겠죠?
div:nth-child(5){
background-color: yellow;
}그 5번째 자식이 div 라고 알려주며, div:nth-child(5) 라고 써줍니다.
적용 완료!!
잘 적용되었습니다!
여기서 궁금한 점이 생길 수 있습니다.
만약 클래스를 추가해준다면, 결과가 다르지 않을까요?
<body>
<div>div 1</div>
<div>div 2</div>
<span>span 1</span>
<span>span 2</span>
<div class="news">div 3</div>
<div>div 4</div>
</body>이렇게, div 3 에 news 라는 클래스가 생겼습니다.
그럼 우리는, news 라는 클래스를 가진 건 딱 하나뿐이니까,
.news:first-child 을 하면 적용되지 않을까? 라고 생각할 수 있지만...
결과를 말하면, 적용 안됩니다!!
클래스가 뭐던 상관 없습니다. body 의 몇 번째 자식인지가 중요합니다.
.news:nth-child(5){
background-color: yellow;
}그러므로, 위와 같이 써야 잘 적용이 됩니다.
📌 부모가 있는 자식에 적용
nth-child 는 부모가 있는 자식에 적용되는 속성입니다.
속성의 직관적인 이름만 봐도 알 수 있죠. 몇 번째 자식이니? 이러고 있으니까요.
<body>
<div>div 1</div>
<div>div 2</div>
<span>span 1</span>
<span>span 2</span>
<div>div 3</div>
<div>div 4</div>
</body>위 코드에서,
div:nth-child(5){
background-color: yellow;
}이렇게 하면 5번째 자식인 div 요소를 지정합니다.
이때, 이 div 의 부모는 body 가 됩니다.
자식을 갖는 부모 요소가 body 뿐이니, body 의 자식 중 5번째를 찾는 것이죠.
여기서 약간의 오해가 생길 수 있습니다.
아하! 그렇다면 위의 CSS 코드는 사실 body div:nth-child(5) 와 동일하군요?
이건 정확하지 않습니다.
물론, 위 상황에서는 자식 요소를 갖는 부모 요소가 body 밖에 없으니 맞기는 하지만, nth-child() 는 부모가 body 가 아니어도, 부모를 갖는 모든 자식요소에 적용 됩니다.
<body> // 부모!
<div>div 1</div>
<div>div 2</div>
<span>span 1</span> // body 의 3번째 자식
<span>span 2</span>
<div class="parent"> // 부모!
div 3
<span>target span1</span>
<span>target span2</span>
<span>target span3</span> // .parent 의 3번째 자식
</div>
<div>div 4</div>
</body>위 HTML 문서를 보면, 자식을 갖는 부모 요소가 2개 있습니다.
body 요소와 parent 클래스를 가지는 div 요소입니다.
span:nth-child(3) {
background-color: yellow;
}이 CSS 를 적용하면 어떻게 될까요?
body 의 3번째 자식인 span 도, .parent 의 3번째 자식인 span 도 모두 선택되었습니다.
nth-child() 가 부모를 갖는 모든 자식요소에 적용됨을 확인할 수 있습니다.
모든 자식에겐 적용하기 싫은데... 특정 요소의 자식에게만 적용할 순 없을까?
간단히 해결할 수 있습니다.
div span:nth-child(3) {
background-color: yellow;
}이 span 이 div 의 자식임을 명시해주면, body 의 자식에는 적용되지 않습니다.
3번째 자식인 span 인데 부모가 div 인 애야~
라고 알려주는 것과 동일합니다.
.parent span:nth-child(3) {
background-color: yellow;
}또는... 위처럼 클래스로 지정해줘도 됩니다.
이렇게 하면 해당 부모의 자식에게만 적용이 됩니다.
body 의 자식인 span 에만 속성을 적용하고 싶다면 아래와 같이 하면 됩니다.
body > span:nth-child(3) {
background-color: yellow;
}body > span 으로, 지정하려는 span 이 body 의 직속 자식임을 명시하면 div 의 자식에는 해당되지 않습니다.
div 의 자식은 body 의 직속 자식이 아닌 증손주... 같은 존재이기 때문입니다.
nth-of-type 으로 지정 요소만 보기
앞서 우리가 오해했을지도 모르는 nth-child 의 동작(div:nth-child(3) 하면 모든 div 를 찾고, 그 중에 3번째를 고르겠지?) 을 그대로 구현한 셀렉터도 존재합니다.
바로 nth-of-type 인데요, 이 셀렉터는 다른 형제 요소는 무시하고, 자신과 같은 타입의 요소 중에서만 탐색합니다.
<body>
<p>hello</p>
<div>one</div>
<div>two</div>
</body>이 html 에
div:nth-type-of(2) {
color: red;
}위를 적용하면, <div>two</div> 에 css 가 적용됩니다.
모든 자식 div 중 2번째 요소를 선택하는 것이죠. 이때 타입이 다른 형제들은 무시합니다❗
