[CSS] nth-child 선택자

평소에 first-child, last-child는 많이 쓴다.
nth-child는 (숫자), (숫자n)까지는 인지 하고 있어서 필요로 할때 쓰긴 하는데,
그 외 더 필요한 부분은 기억이 가물가물 거려서 적어보려고 한다.

1. 홀수

div {
	nth-child(odd)	// 1, 3, 5, 7 ...
}

2. 짝수

div {
	nth-child(even)	// 2, 4, 6, 8 ...
}

3. n의 배수

div {
	nth-child(3n)	// 3, 6, 9, 12, 15 ...
}

4. n번째부터 n번째까지

div {
	nth-child(-n +5)	// 1 ~ 5
}

5-1. n의 배수 + n ( 특정 순서 )

배수는 ' 0 ' 부터 계산되어 4 * 0 = 0 + 1 = 1도 결과 값에 포함이다.

div {
	nth-child(4n+1)		// 1, 5, 9, 13, 17 ...
}

5-2. n의 배수 + 2

3의 배수에 +2를 더한 값이다. ( 0부터 계산되니 0 + 2 = 2도 결과값 포함 )

div {
	nth-child(3n+2)	// 2, 5, 8, 11, 14 ...
}