선택자 (구조선택자) : nth-child, first-child, first-child

 

 

 

퍼블리싱을 할 때 CSS 선택자를 이용하면 선택이 훨씬 용이한데요. 오늘은 그 종류에 대해서 이야기 해보려고 합니다.

 

nth-child(odd)	홀수 요소
nth-child(even)	짝수 요소
nth-child(숫자)	위에서 몇번째 요소
nth-last-child(숫자)	마지막에서 몇번째 요소
first-child	첫번째 요소
last-child	마지막 요소

 

 

 

쉽게 이해를 돕기 위해서 아래와 같이 코딩을 했을 때 각 선택자 별로 선택되는 모습을 보여드리도록 하겠습니다.

<style>
	li:nth-child(odd) /*홀수 li*/
	li:nth-child(even) /*짝수 li*/
	li:nth-child(3) /*3번째 li*/
	li:first-child /*첫번째 li*/
	li:last-child /*마지막 li*/
	li:nth-last-child(2) /*아래에서 두번째 li*/
</style>

 

 

 li:nth-child(odd)  

 

li:nth-child(even)

 

li:nth-child(3)

 

li:nth-last-child(2)

 

li:first-child

 

li:last-child