[css] ntn-child, ntn-last-child

:nth-child(), :nth-last-child()

• :nth-child()와 :nth-last-child()는 특정 순서에 있는 요소를 선택할 때 사용하는 선택자
• :nth-child()는 앞에서부터 세고, :nth-last-child()는 뒤에서부터

:nth-child

앞에서부터

/* 목록의 두 번째 <li> 선택 */
li:nth-child(2) {
  color: red;
}

/* 목록의 4, 8, 12, 16...번째에 위치하는 모든 요소 선택 */
:nth-child(4n) {
  color: blue;
}

//홀수번째
:nth-child(odd) 또는 :nth-child(2n+1)

//짝수번째
:nth-child(even) 또는 :nth-child(2n)

// 임의의 10번째 요소
:nth-child(10)

 

:nth-last-child

뒤에서부터

/* 목록의 뒤에서 두 번째 <li> 선택 */
li:nth-last-child(2) {
  color: red;
}

/* 목록의 뒤에서 4, 8, 12, 16..번째에 위치하는 모든 요소 선택 */
:nth-last-child(4n) {
  color: blue;
}

//뒤부터 홀수번째
:nth-child(odd) 또는 :nth-child(2n+1)

//뒤부터 짝수번째
:nth-child(even) 또는 :nth-child(2n)

// 뒤부터 임의의 10번째 요소
:nth-child(10)