css nth-child 선택자 외 first-child, last-child 선택자 정리

html 문서에서 같은 형태의 요소들이 반복될 때, 그리고 이 요소들을 특정 순서에 따라 CSS 속성을 다르게 지정하고 싶을 때 nth-child 선택자를 사용해서 해결할 수 있다. 그런데 nth-child 선택자는 그다지 친근한 형태의 이름이 아니라서 어려워 보인다. 하지만 의외로 간간히 쓰이는 구석이 많은 녀석이므로 확실하게 한번에 이해하고 넘어가도록 하자.

child 선택자의 종류는 여러가지가 있다. 가장 많이 사용하는 선택자가 nth-child 선택자이며 only-child, first-child, last-child, nth-last-child가 있다.

비슷한 녀석중에 nth-of-type와 그 똘마니들.. 선택자들가 있는데 이녀석에 대한 이야기는 나중으로 미루겠다.


선택자 이름이 왜 ~ child 일까?

이 선택자를 처음 봤다고 가정하고 한가지 비유를 들어보겠다. 어떤 부모 밑에 자식이 5인데 낳은 순서대로 딸, 딸, 아들, 아들, 아들 이렇게 다섯이라고 하자. 이 때 어떤 사람이 아들 중 한명을 가리키면서 이렇게 묻는다. "저 남자아이의 형제 중 3째는?"

nth-of-type 선택자가 이와 비슷하게 동작한다. 즉, 어떤 요소를 선택했을 때 -> 우선 부모 요소로 올라간 후에 -> 다시 그 부모의 자식 요소의 순서를 계산하기 때문에 child라는 이름이 붙은 것이다. 어쩌면 brother 선택자라고 해도 될지도 모른다고 생각하지만 뭐 어떻게든 이해하면 그만일 듯 싶다.

물론 ~child 선택자의 동작이 위 비유와 정확하게 일치하지는 않는다. 구체적인 것은 예를 보면서 알아보도록 하겠다.

html 문서가 해석될 때는 차례대로(위->아래) 해석된다.

div:nth-child(4)

위 선택자에서 div 의해서 가장 먼저 <div> 셋째(아들) </div>이 찾아진다. 그 다음 nth-child(4) 선택자에 의해 -> body(부모) -> 4번째 자식요소를 찾는 것이다. 따라서 위와 같이 넷째(아들)에 css가 적용되었다.

같은 종류(type)의 요소에만 적용된다.

그런데 위 선택자를 div:nth-child(2)라고 괄호 안의 숫자를 2로 변경해보자. 그러면 <p> 둘째(딸) </p> 가 선택되는데 이 때는 css가 적용되지 않는다. 이렇게 자식요소의 순서를 셀 때는 모든 요소를 다 포함해서 세지만, 적용되는 요소는 선택자에서 선택한 요소 타입과 같이야만 적용이 된다. 

이렇게 div 타입 외 다른 타입의 요소에는 css가 적용되지 않는다.

또는 #hello:nth-child(2) 라고 id를 지정해서 ~child 선택자를 사용할 수도 있다. 단, id를 지정해서 child 선택자를 사용했으므로 적용대상은 해당 id를 가진 요소로만 제한된다. 

위 예의 선택자를 해석해 보면,

먼저 id="hello"인 요소 <p id="hello"> 둘째(딸) </p> 을 찾는다.

부모(body)로 다시 올라가서 -> 다시 3번째 자식요소를 찾는다.

id="hello"로 선택자에서 지정한 id와 동일하므로 CSS가 적용된다.

그런데 보통은 위 예제처럼 복잡하게 사용하지는 않고 단지 nth-child 선택자를 제대로 이해하기 위한 목적이므로 이해했다면 다음으로 넘어가자.

이렇게 nth-child 선택자가 어떻게 동작하는지 알아보았다. 이젠 나머지 ~child 선택자는 이름만 보고 어떻게 동작하는지 쉽게 유추할 수 있다.

first-child 선택자

이름에서 알 수 있듯이 첫 번째 자식요소를 선택된 요소를 선택한다는 뜻이다. 이 선택자와 nth-child(1)는 동일하다.

last-child 선택자

역시 마지막 자식요소를 선택한다는 뜻이다. first, last 모두 nth-child와 적용방법은 동일하고, 단지 first는 첫 번째 자식, last는 마지막 자식의 선택으로 한정된 것이다.

끝에서 부터 세려면 nth-last-child( )

자식요소를 순서대로 세는 방법이 nth-child라면 끝에서 부터 반대로 세려면 nth-last-child 선택자를 사용하면 된다. 

세는 방향만 반대며 기타 규칙들은 앞에서 설명한 것과 동일하다.

그리고 nth-fist-child 라는 선택자는 없는데 의미상 nth-child 선택자가 그 기능을 하기 때문이다. 

only-child 선택자

말 그대로 자식이 외동인 경우에만 적용되는 선택자이다. 

나머지 규칙 역시 동일하게 적용되므로 어렵지 않을 것이다.

nth-child 선택자의 다양한 표현들

nth-child 선택자를 사용할 때 단순히 괄호 안에 숫자만 넣을 경우 선택되는 요소는 1개 뿐이다. 숫자 외 표현을 넣어 다양한 선택을 할 수 있다. 

nth-child(odd)

홀수 번째 자식만 선택한다.

nth-child(even)

짝수 번째 자식만 선택한다.

nth-child(n+0)

n+0 번째 자식을 선택한다. 이 때 n의 값은 0부터 시작해서 증가한다. 그리고 +0에 숫자는 0대신 사용자가 직접 다양하게 지정하면 된다.

nth-child(-n+0)

-n+0 번째 자식을 선택하며 역시 n은 0부터 시작해서 증가한다. 역시 마찬가지다.

nth-of-type 선택자

이 선택자는 단순히 타입에 대해서 적용되는 선택자다. child 선택자의 경우에는 우선 선택된 요소의 부모를 찾고 다시 자식요소의 순번을 찾지만 

of-type 선택자는 단지 해당 요소의 타입을 찾아서 순번을 적용하는 선택자다. 

순번은 동일 레벨에 있는 같은 타입 요소에 대한 순서만을 센다. child 선택자들 보다는 직관적으로 이해하기는 더 쉽지만 보통 nth-child 선택자를 많이 사용하는 것 같다.

글을 쓰다보니 어렵다기 보다는 까다로운 선택자인 것 같다. 대체로 nth-child 선택자가 많이 사용되는데 실제로 웹을 만드는 디자이너나 프로그래머의 패턴에 따라서 선택지가 다양할 것 같다.


이 댓글을 비밀 댓글로
    • 초보자
    • 2019.04.24 16:39
    궁금했던 개념이었는데 쉽게 설명해주셔서 빨리 이해가 되었습니다, 잘 읽고 가요~
    • 초급반
    • 2020.01.19 11:20
    brother라는 설명에 확 와닿네요. 감사합니다 ㅎㅎ