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