CSS에서 여러 개의 요소에 동일한 스타일을 적용하고 싶다면 쉼표(,)를 활용하세요. 흔히 '그룹 선택자'라고 불리는 이 방법은 각 요소를 쉼표로 구분하여 나열하기만 하면 되므로 매우 간단합니다.
예를 들어, 문서 내의 모든 <div> 요소와 <p> 요소를 한 번에 선택하려면 아래와 같이 작성할 수 있습니다.
예제
<!DOCTYPE html>
<html>
<head>
<style>
div, p {
color: blue;
background-color: orange;
}
</style>
</head>
<body>
<h1>Demo Website</h1>
<h2>Fruits</h2>
<p>Fruits are good for health.</p>
<div>
<p>This is demo text.</p>
</div>
</body>
</html>위 코드를 실행하면 모든 <p> 태그와 <div> 태그에 파란색 글자색과 주황색 배경색이 동시에 적용되는 것을 확인할 수 있습니다. 이처럼 쉼표 선택자를 사용하면 중복된 CSS 코드를 줄일 수 있고, 스타일 시트를 훨씬 더 간결하고 효율적으로 관리할 수 있습니다.