CSS 그룹 선택자(Grouping Selector) 완벽 정리

CSS 그룹 선택자란?

CSS에서는 여러 개의 선택자에 동일한 스타일을 한 번에 적용할 수 있습니다. 이를 그룹 선택자(Grouping Selector)라고 하며, 각 선택자를 쉼표(,)로 구분하여 나열하기만 하면 됩니다.

기본 사용 예시

다음 예제는 h1, h2, h3 요소에 같은 스타일 규칙을 일괄 적용하는 방법을 보여줍니다.

h1, h2, h3 {
   color: #36C;
   font-weight: normal;
   letter-spacing: .4em;
   margin-bottom: 1em;
   text-transform: lowercase;
}

이렇게 정의된 스타일 규칙은 h1, h2, h3 요소 모두에 적용됩니다. 선택자를 나열하는 순서는 결과에 영향을 주지 않으며, 목록에 포함된 모든 요소에 해당 선언들이 동일하게 반영됩니다.

ID 선택자를 함께 묶어 사용하기

그룹 선택자는 태그 선택자뿐만 아니라 ID 선택자와도 함께 사용할 수 있습니다. 아래 예제처럼 여러 ID 선택자를 하나의 규칙으로 결합하면 중복 코드를 크게 줄일 수 있습니다.

#content, #footer, #supplement {
   position: absolute;
   left: 510px;
   width: 200px;
}

위 코드는 #content, #footer, #supplement 세 영역에 절대 위치 지정과 너비 설정을 한 번에 적용합니다.

그룹 선택자 활용 팁

그룹 선택자를 활용하면 동일한 스타일을 반복해서 작성할 필요가 없어 코드가 간결해지고 유지보수가 쉬워집니다. 다만 선택자가 너무 많아지면 어떤 요소에 어떤 스타일이 적용되는지 파악하기 어려워질 수 있으므로, 관련성 높은 선택자끼리 묶는 것이 좋습니다.