728x90
css에서 nth-child는 다음과 같이 쓰인다.
/* 첫번째 item에 styling할 때 */
.item:first-child{
color: #FFFFFF;
}
/* 두번째 item에 styling할 때 */
.item:nth-child(2){
color: #0066FF;
}
/* 마지막 item에 styling할 때 */
.item:last-child{
color: #000000;
}
nth-child의 child라는 말 때문에, item 클래스의 자식요소에 styling하라는 뜻인가? 싶을 수 있지만, 여기서 child의 의미는 item 부모 요소의 child를 의미한다.
부모 요소의 child~ 이런 식으로 기억하는 것이 더 헷갈릴 수 있으므로, nth-child가 나오면 선택자와 같은 level에 있는 것 중 몇 번째인지를 확인해보는 게 가장 좋다.
.curriculum .row:nth-child(2){
margin-bottom: 48px;
}
위의 코드는, curriculum 클래스의 자식인 row 클래스와 같은 level에 있는 요소 중에서 2번째의 margin-bottom을 48px로 해달라는 뜻이다.
한 가지 예시를 더 보자. 아래와 같은 html 코드가 있을 때, 짝수 번 list item에는 color를 red로, 홀수 번 list item에는 color를 yellow로 주고 싶을 때는 어떻게 할 수 있을까?
<ol>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
<li>F</li>
</ol>
같은 level에 있는 li 요소 중, 짝수 번은 color를 #FF4949로,
같은 level에 있는 li 요소 중, 홀수 번은 color를 #FFC82C로 준다는 뜻이 되는 것이다.
li:nth-child(2n){
color: #FF4949;
}
li:nth-child(2n-1){
color: #FFC82C;
}728x90