CSS :not(:first-child) 선택기로 첫 번째 요소를 제외한 모든 요소를 ​​선택하는 방법

CSS `:not(:first-child)를 사용하여 첫 번째 요소를 제외한 모든 HTML 요소를 선택하는 방법 알아보기 선택자.

CSS 스타일시트에 다음 규칙 세트를 추가하면 전체 웹사이트의 모든 h2 요소에 64픽셀의 상단 여백이 생깁니다.

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를 더 쉽게 작성할 수 있기 때문입니다.

그러나 직접 선택기 스타일은 여전히 ​​​​자리가 있습니다. 제품 UI를 통해 일관성과 균일성을 자동으로 주입하기 위해 요소 선택기에서 직접 일부 기준선/전역 스타일을 설정하는 것이 실용적입니다. 이 접근 방식을 사용하면 반복적인 UI 스타일 지정을 많이 줄일 수 있습니다. 제대로 수행하면