[css] nth-child, nth-of-type 자식 선택자 응용

 

 

 

/* 홀수 */
li:nth-child(odd) { 
	...
}

/* 짝수 */
li:nth-child(even) { 
	...
} 

/* 3의 배수   */
li:nth-child(3n){
	...
}

/* 8번째 이후부터 모두 */
li:nth-child(n+8) {
	...
}

/* 1번째부터 5번째 까지 */
li:nth-child(-n+5) {
	...
}

/* 10번째부터 15번째 까지 */
li:nth-child(n+10):nth-child(-n+15) {
	...
}

 

기본적인 부분은 알고 있었으나 마지막 두개는 신박했다.

역시 css를 잘 알 수록, 작업이 쉬워진다.

 

 

추가적으로 무조건 알아둬야할 css 선택자.

https://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048?ec_unit=translation-info-language 

The 30 CSS Selectors You Must Memorize