CSS의 선택자로 자식 선택하기: 첫 번째, 마지막, N번째

들어가며

웹 개발에서 CSS 선택자는 HTML 요소에 효율적으로 스타일을 적용하는 데 필수적인 도구이다. 특히 자식 선택자인 :first-child, :last-child, :nth-child()는 목록이나 구조화된 데이터에서 특정 위치의 자식 요소에 스타일을 적용하는 데 매우 유용하다.

 

이러한 CSS 자식 선택자는 첫 번째 자식 요소, 마지막 자식 요소, 그리고 N번째 자식 요소와 같이 HTML 구조 내에서 특정 요소에 선택적으로 스타일을 적용할 수 있도록 도와준다.

 

이번 글에서는 이러한 CSS 자식 선택자를 활용하여 첫 번째, 마지막, N번째 자식 요소에 스타일을 적용하는 방법을 자세히 알아본다.

 

첫 번째 자식 요소 선택하기(:first-child)

CSS의 :first-child 선택자는 부모 요소의 첫 번째 자식 요소에 스타일을 적용하는데 사용됩니다. HTML 목록의 첫 번째 항목이나 문단의 첫 줄에만 스타일을 적용하고 싶을 때 유용하다. 예를 들어, 아래와 같이 <ul> 요소 안의 <li> 요소들 중 첫 번째 <li>에만 스타일을 적용할 수 있다.

<ul>
  <li>첫 번째 아이템</li>
  <li>두 번째 아이템</li>
  <li>세 번째 아이템</li>
</ul>

See the Pen :first-child 선택자를 이용해 첫 번째 자식 요소에 스타일을 적용 by Ohnim (@ohnim) on CodePen.

 

 

 

마지막 자식 요소 선택하기(:last-child)

CSS에서 :last-child 선택자는 부모 요소의 마지막 자식 요소를 선택하여 스타일을 적용하는데 사용된다. 이 선택자는 HTML 문서의 목록 마지막 항목이나 문단의 마지막 물에 특별한 스타일을 적용할 때 유용하다. 예를 들어, 아래와 같이 여러 목록 항목 중에서 마지막 <li> 요소에만 다른 색상을 적용하고자 할 때 :last-child를 사용할 수 있다.

 

See the Pen :last-child 선택자를 이용해 마지막 자식 요소에 스타일을 적용 by Ohnim (@ohnim) on CodePen.

 

수식을 이용해 자식 요소 선택하기(:nth-child())

CSS에서 :nth-child() 선택자는 부모 요소의 자식 중 N번째 요소를 선택할 때 사용된다. 이 선택자는 순서를 기반으로 하는 선택자로, HTML 구조에서 규칙적으로 반복되는 요소에 스타일을 적용하는데 유용하다. 특히, 수학적 표현식을 활용하면 복잡한 패턴에 맞춰 자식 요소를 선택할 수 있어 규칙적인 디자인 적용에 효과적으로 대응할 수 있다.

:nth-child()에서 선택하는 자식 요소는 1-based 인덱싱을 사용한다. 즉, 첫 번째 자식 요소는 1을 의미한다. 대부분의 프로그래밍 언어에서 0-based 인덱싱을 사용하는 것과 다르므로, 혼동하지 않도록 주의해야 한다.

 

특정 순번의 요소를 선택

:nth-child() 선택자는 부모 요소의 자식 중 특정 순번에 위치한 요소에 스타일을 적용할 수 있다. 예를 들어, 다음과 같이 두 번째 자식 요소에 스타일을 적용할 수 있다.

 

See the Pen :nth-child 선택자를 이용해 특정 순번에 위치한 요소에 스타일을 적용 by Ohnim (@ohnim) on CodePen.

 

이 CSS는 HTML 목록의 두 번째 <li> 요소에만 배경색을 밝은 파란색으로 변경한다. 만약 :nth-child() 안에 있는 숫자를 7로 변경하면, 일곱 번째 자식 요소에만 스타일이 적용된다. 이러한 방법은 HTML 목록이나 테이블에 특정 순서에 있는 요소를 시각적으로 강조할 때 사용할 수 있다.

 

홀수/짝수 요소 선택

:nth-child() 선택자는 홀수와 짝수 번째 자식 요소를 쉽게 선택할 수 있다. 이를 위해 예약된 odd와 even 키워드를 사용한다. 이 키워드들은 수학적 표현식으로 처리되는데, odd는 2n + 1로 1, 3, 5, 7… 처럼 홀수 번째 요소를, even은 2n으로 2, 4, 6, 8… 과 같은 짝수 번째 요소를 선택한다.

 

See the Pen :nth-child 선택자를 이용해 특정 순번에 위치한 요소에 스타일을 적용 by Ohnim (@ohnim) on CodePen.

 

이 CSS는 HTML 목록의 홀수 번째 <li> 요소에는 파란색 배경이 적용되고, 짝수 번째 <li> 요소에는 초록색 배경이 적용되어 교차하는 배경색 효과를 구현할 수 있다. 이 방식은 긴 목록이나 HTML 테이블에서 행을 시각적으로 구분해 가독성을 높이는데 유용하다.

 

X번째 요소부터 마지막 요소까지 선택하기

:nth-child() 선택자는 특정한 X번째 요소부터 마지막 자식 요소까지 스타일을 적용하는 방법도 제공한다. 아래의 예시에는 HTML 목록에서 세 번째 <li> 요소부터 마지막 <li> 요소까지 이탤릭체가 적용된다.

 

See the Pen :nth-child 선택자를 이용해 X번째에 위치한 요소부터 스타일을 적용 by Ohnim (@ohnim) on CodePen.

 

여기서 n+3는 n이 0부터 시작하여 1씩 커지기 때문에, 세 번째 자식 요소부터 스타일을 적용하게 된다. 즉, n=0일 때는 세 번째 요소에 스타일이 적용되고, n=1일 때는 세 번째, n=2일때는 다섯 번째 요소에 스타일이 적용되는 방식이다. 만약 일곱 번째 요소부터 이탤릭체를 적용하고 싶다면 :nth-child(n+7)로 뒤의 숫자만 7로 변경해주면 된다.

 

첫 번째 요소부터 X번째 요소까지 선택하기

:nth-child()를 이용하면 부모 요소의 첫 번째 자식 요소부터 X번째 자식 요소까지 스타일을 적용할 수 있다. 예를 들어, 아래의 CSS는 첫 번째부터 세 번째까지의 자식 요소에 밑줄을 적용한다.

 

See the Pen :nth-child 선택자를 이용해 X번째에 위치한 요소까지 스타일을 적용 by Ohnim (@ohnim) on CodePen.

 

여기서 -n+3은 n이 0부터 시작해 1씩 증가하면서, 세 번째부터 첫 번째 자식 요소까지 선택하는 방식이다. 즉, n=0일 때는 세 번째 요소, n=1일 때는 두 번째 요소, n=2일 때는 1번째 요소를 선택하게 된다. HTML 목록이 1-based 인덱싱을 사용하므로, 실제로 선택되는 요소가 첫 번째, 두 번째, 세 번째 요소라는 것에 유의하자.

 

만약 처음 일곱번째 요소까지 스타일을 적용하고 싶다면, :nth-child(-n+7)와 같이 뒤의 숫자만 7로 바꿔 적용하면 된다. 이 방식은 콘텐츠가 많을 때, 처음 몇 개의 요소에만 스타일을 적용하여 주요 내용을 강조하고 싶을 때 주로 사용한다.

 

특정 패턴의 요소 선택

:nth-child() 선택자의 수식에서는 n에 계수를 설정하여 조금 더 복잡한 패턴을 만들 수 있다. 예를 들어, 3n+1이라는 수식을 사용하면 세 번째마다 첫 번째 요소가 선택된다. 이는 1, 4, 7, 10… 번째 요소들을 선택하여, 다음과 같이 적용할 수 있다.

 

See the Pen :nth-child 선택자를 이용해 특정 패턴의 요소에 스타일을 적용 by Ohnim (@ohnim) on CodePen.

 

맺으며

:first-child, :last-child, :nth-child()와 같은 CSS 자식 선택자들은 첫 번째, 마지막, 또는 특정 순번의 자식 요소에 효율적으로 스타일을 적용할 수 있는 강력한 도구이다. 특히 :nth-child() 선택자는 수학적 표현식을 활용해 복잡한 패턴도 손쉽게 처리할 수 있어, HTML 구조 내에서 반복적이고 규칙적인 디자인 작업에 유연하게 대응할 수 있다.

 

자바스크립트를 사용해 동적으로 스타일을 적용하는 대신, :first-child, :last-child, :nth-child() 선택자를 활용하면 성능 최적화와 함께 코드의 간결함을 유지할 수 있다. CSS 선택자만으로도 다양한 조건을 처리할 수 있기 때문에, 이러한 방식으로 리팩토링을 시도해 보는 것도 좋은 방법이다. 이를 통해 DOM 조작을 줄이면서도 효과적으로 원하는 스타일을 적용할 수 있다.