nth-child 다양하게 사용하기

 

 

 

기본적으로 nth-child는

첫번째(first-child) 또는 마지막 자식요소(last-child)이외에

nth-child로 특정 순번의 자식요소를 선택할 수 있다.

 

 

🔎 예시

div:first-child {} /* 첫번째 자식요소 */
div:last-child {} /* 마지막 자식요소 */

div:nth-child(3) {} /* 3번째 */
div:nth-child(7) {} /* 7번째 */
div:nth-child(9) {} /* 9번째 */

 

 

 

📘 함수식 사용하기

이외에도 ()안에 함수식 넣어 사용할 수도 있다.

기본적인 식은  An+B이다.

A는  정수 인덱스 증감량, 즉 n*A가 된다.

B는 정수 오프셋

n은 0부터 시작하는 양의 정수이다.

 

 

 

1. 배수 지정

예를 들어 2n은 2의 배수, 3n은 3의 배수 값이 된다.

2의 배수 = 짝수는 nth-child(even)로도 표현할 수 있다.

 

/* 짝수 */
div:nth-child(2n)
div:nth-child(even)
/* 홀수 */
div:nth-child(2n+1)
div:nth-child(odd)

 

 

 

2. 특정 구간 설정

그렇다면, 특정구간을 설정해서 사용해보자.

 

예를 들어 5번째 이후부터 적용하고 싶은 속성이 있다고 가정하면

함수식은 n+5로 세울 수 있다.

계산해보면, 0+5 = 5, 1+5 = 6, 2+5 = 6 ... 5번째부터 이후까지 정해진다.

 

 

반대로 5번째 이전까지만 속성을 적용시켜야 한다고 가정하자.

그렇다면 함수식은 -n+5로 세울 수 있다.

계산해보면, 0+5 = 5, -1+5 = 4, -2+5 = 3 ... 값이 점차 작아진다.

 

div:nth-child(n+5) /* 5번째, 6번째, 7번째.. 등 */
div:nth-child(-n+5)/* 5번째, 4번째, 3번째, 2번째, 1번째까지 */

 

 

이번에 시작 지점부터 끝지점까지 특정구간을 설정해보자.

6~10번째를 지정한다고 가정하자.

위에 내용을 응용해서 시작 지점은 n+6이 될 것이다.

끝지점은 -n+10으로 표현할 수 있다.

이 두가지를 이어서 표현하는 방법은 아래 예시에서 확인하자

 

div:nth-child(n+6):nth-child(-n+10)

 

 

 

 

📖 참고 출처

:nth-child - CSS: Cascading Style Sheets | MDN