CSS 선택자 그룹화 – 여러 요소를 한 번에 스타일링하는 방법

CSS의 그룹 선택자(grouping selector)는 여러 개의 요소를 동시에 선택하여 동일한 스타일을 한꺼번에 적용할 때 사용합니다. 각 요소마다 같은 스타일을 반복해서 작성하지 않아도 되므로 코드가 간결해지고, 유지보수에 드는 노력도 크게 줄어듭니다.

그룹 선택자를 만들려면 여러 선택자를 쉼표(,)로 구분하여 나열하면 됩니다.

기본 문법

CSS 그룹 선택자의 기본 문법은 다음과 같습니다.

element, element {
    /*스타일 선언*/
}

아래 예제들을 통해 CSS 그룹 선택자의 실제 활용 방법을 살펴보겠습니다.

예제 1: 여러 요소에 공통 스타일 적용하기

다음 예제에서는 article, p, img 세 가지 요소를 그룹으로 묶어 블록 표시, 가운데 정렬, 이중 주황색 하단 테두리 스타일을 한 번에 적용합니다.

<!DOCTYPE html>
<html>
<head>
<style>
article, p, img {
    display: block;
    margin: auto;
    text-align: center;
    border-bottom: double orange;
}
</style>
</head>
<body>
<article>Demo Text</article>
<p>This is demo text.</p>
<br/>
<img src="https://www.tutorialspoint.com/swing/images/swing.jpg">
</body>
</html>

실행 결과

위 코드를 실행하면 다음과 같은 결과가 출력됩니다.

CSS 선택자 그룹화 – 여러 요소를 한 번에 스타일링하는 방법

예제 2: ::after 의사 요소와 함께 그룹화하기

그룹 선택자는 ::after 같은 의사 요소(pseudo-element)와도 함께 사용할 수 있습니다. 아래 예제에서는 div::after와 p::after를 그룹으로 묶어 동일한 콘텐츠와 내부 그림자 효과를 적용합니다.

<!DOCTYPE html>
<html>
<head>
<style>
div::after, p::after {
    content: "Demo text";
    margin: 4px;
    box-shadow: inset 0 0 4px darkorange;
}
</style>
</head>
<body>
<div></div>
<p>This is example text.</p>
</body>
</html>

실행 결과

위 코드를 실행하면 다음과 같은 결과가 출력됩니다.

CSS 선택자 그룹화 – 여러 요소를 한 번에 스타일링하는 방법

정리

그룹 선택자를 활용하면 중복된 CSS 코드를 크게 줄일 수 있습니다. 특히 여러 요소에 동일한 타이포그래피나 색상, 여백 등을 적용할 때 유용하며, 스타일 변경 시 한 곳만 수정하면 되므로 유지보수성이 향상됩니다.