CSS 그룹 선택자 의미와 사용법 및 예제


CSS 그룹 선택자 기호는 쉼표 , 기호를 사용합니다. 의미는 여러 개의 복수 태그를 동시에 선택자로 지정할 때 사용합니다. 태그 전체는 * 기호를 사용하면 됩니다.

CSS 그룹 선택자

그룹 선택자 (Group Selector)는 여러 선택자를 그룹으로 묶는 기능입니다. 보통 선언 블록의 명령문이 서로 같아서 중복될 때 코드를 줄이는 방법입니다.

예를 들어 아래와 같이 선언 블록의 명령문이 color: red;로 동일한 세 가지 선택자가 있습니다.

h1 {
  color: red;
}
p {
  color: red;
}
li {
  color: red;
}

이럴 경우 중복되는 선언 블록을 하나로 줄이는 것이 경제적일 것입니다.

선언 블록의 중복을 제거하고 선택자는 그룹으로 묶습니다. 이 때 쉼표 , 기호로 선택자들을 서로 연결합니다.


h1, p, li {
  color: red;
}

가독성을 위해서 그룹으로 선택자를 묶을 때 쉼표 사이에 공백이 몇 칸 이상 벌어져도 그룹 결합은 유지됩니다.

h1,       p,             li {
  color: red;
}

위의 세 가지 코드는 모두 동일한 문법입니다. <h1>, <p>, <li> 태그에 붉은 글씨(color: red;)를 모두 적용시킵니다.

<!DOCTYPE html>
<html>
  <head>
    <style>
      h1, p, li {
        color: red;
      }
    </style>
  </head>
  <body>
    <h1>그룹 선택자</h1>
      <p>그룹 선택자는 선언 블록이 같을 때 사용합니다.</p>
      <ul>
        <li>선언 블록을 삭제하는 대신 선택자를 쉼표로 서로 연결하여 그룹화합니다.</li>
      </ul>
  </body>
</html>

쉼표없이 공백을 사용할 경우 자손 선택자라는 다른 기능이 구현되므로 유의합니다.