CSS :not(:first-child) 선택자로 첫 번째 요소를 제외한 나머지 요소 모두 선택하는 방법

CSS의 :not(:first-child) 선택자를 사용하면 첫 번째 요소를 제외한 나머지 HTML 요소를 한 번에 선택할 수 있습니다. 이번 글에서는 그 원리와 실무 활용 방법을 알아보겠습니다.

예를 들어 다음 규칙(rule-set)을 CSS 스타일시트에 추가하면, 웹사이트 전체의 모든 h2 요소에 64px의 상단 마진이 적용됩니다.

h2 {
    margin-top: 64px;
}

하지만 만약 첫 번째 h2 요소에는 이 상단 마진을 적용하고 싶지 않고, 나머지 모든 h2 요소에만 적용하고 싶다면 어떻게 해야 할까요?

:not(:first-child) 선택자 사용하기

해결 방법은 간단합니다. 스타일시트에 다음 규칙을 추가하세요.

h2:not(:first-child) {
    margin-top: 64px;
}

이제 웹사이트의 모든 h2 요소는 각 문서(페이지·포스트)의 맨 처음 h2 요소를 제외하고 일관되게 동일한 margin-top 값을 갖게 됩니다.

:not(:first-child) 선택자의 실무 활용 사례

웹사이트의 타이포그래피 레이아웃을 디자인한다고 가정해 보겠습니다. 섹션 사이에 시각적인 여유 공간을 주기 위해 모든 글의 h2 제목 요소에 margin-top: 64px;을 적용하기로 결정했습니다.

그런데 모든 글의 상단에는 표지 이미지, 오버레이, 그 위에 배치된 다양한 텍스트 요소로 구성된 매거진·포스터 스타일의 인트로 섹션이 있습니다. 이 경우 제목에는 h1, 태그라인에는 h2처럼 여러 개의 제목 요소를 사용하게 되죠.

이럴 때 인트로 섹션 안에서는 본문 내부와 똑같은 간격 값(마진·패딩)을 적용하고 싶지 않을 겁니다. 바로 이런 문제를 :not(:first-child) 선택자 하나로 깔끔하게 해결할 수 있습니다.

이 선택자는 모든 HTML 요소에 사용할 수 있습니다. 또 다른 대표적인 활용 사례는 메뉴를 순서 없는 목록 <ul>로 마크업하는 경우입니다. 메뉴의 ul에만 적용하고 싶은 세부 스타일(정렬, 테두리, 색상 등)이 있지만, 사이트의 다른 목록 요소까지 함께 변경되길 원하지 않을 때 유용합니다.

요즘 CSS는 클래스 기반 스타일링이 주류 아닌가요?

현대 웹 개발에서는 요소 선택자를 직접 스타일링하지 않고 클래스를 사용하는 것이 일반적입니다. 저 역시 클래스를 선호하는데, 성장하는 웹 플랫폼에서 확장 가능하고 재사용하기 쉬운 CSS를 작성할 수 있기 때문입니다.

그럼에도 불구하고 요소 선택자를 직접 스타일링하는 방식은 여전히 그 자리를 지키고 있습니다. 요소 선택자에 기본(global/baseline) 스타일을 먼저 설정해 두면, 제품 UI 전반에 일관성과 통일성이 자동으로 적용되어 매우 실용적입니다. 올바르게 활용하면 반복적인 UI 스타일링 작업을 크게 줄여 줄 수 있는 접근법입니다.