[React] CSS nth-child 사용법 | 특정 자식 요소 선택하기

CSS에서는 선택자를 이용해 특정 요소만 골라서 스타일을 적용할 수 있다.

1. 자식 요소 선택하기

> 선택자는 바로 아래에 있는 자식 요소를 선택할 때 사용한다.

section > div {
    color: red;
}

위 코드는 section 바로 아래에 있는 div 요소를 선택한다.

예를 들어 다음과 같은 HTML이 있다.

<section>
    <div>첫 번째</div>
    <div>두 번째</div>
    <p>세 번째</p>
</section>

section > div {
    color: red;
}

 

section의 자식 중 div인 첫 번째와 두 번째 요소에만 스타일이 적용된다.

2. nth-child()

:nth-child()를 사용하면 자식 요소 중 특정 순서에 있는 요소를 선택할 수 있다.

section > div:nth-child(1) {
    color: blue;
}

위 코드는 section의 자식 요소 중 **첫 번째 자식인 div**를 선택한다.

<section>
    <div>첫 번째</div>
    <div>두 번째</div>
    <div>세 번째</div>
</section>

section > div:nth-child(1) {
    color: blue;
}

이 경우 첫 번째 div에만 스타일이 적용된다.

두 번째 요소를 선택하려면 다음과 같이 작성한다.

section > div:nth-child(2) {
    color: red;
}

 

3. 주의할 점

nth-child()는 해당 태그만 기준으로 순서를 세는 것이 아니라 부모의 모든 자식 요소를 기준으로 순서를 계산한다.

예를 들어 다음과 같은 HTML이 있다.

<section>
    <div>첫 번째</div>
    <p>두 번째</p>
    <div>세 번째</div>
</section>

이때

section > div:nth-child(2) {
    color: red;
}

는 적용되지 않는다.

두 번째 자식이 div가 아니라 p이기 때문이다.

세 번째 자식인 div를 선택하려면 다음과 같이 작성해야 한다.

section > div:nth-child(3) {
    color: red;
}