프론트엔드Explorer

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;
}