[CSS] 선택자 목록(Selector List)

**선택자 목록(Selector List)**은
여러 개의 CSS 선택자를 쉼표( , )로 묶어 한 번에 스타일을 적용하는 방법입니다.

 

1. 선택자 목록이란

같은 스타일을 여러 요소에 적용해야 할 때,
선택자를 쉼표로 나열해 선언합니다.

h1, h2, h3 {
  color: #333;
}

h1, h2, h3 모두 동일한 스타일 적용

 

2. 왜 사용할까?

• 중복 코드 제거
• CSS 가독성 향상
• 유지보수 용이

**같은 관심 대상(그룹)**을 한 번에 관리

 

3. 다양한 선택자 혼합 가능

선택자 목록에는 종류 제한이 없습니다.

.title, #main, section p {
  margin-bottom: 16px;
}

 

• 클래스
• 아이디
• 태그
• 조합 선택자
  모두 함께 사용 가능

 

4. 주의할 점

• 쉼표 하나하나가 독립적인 선택자
• 줄바꿈 가능하지만 쉼표는 필수

/* ❌ 잘못된 예 */
h1 h2 h3 { }

/* ⭕ 올바른 예 */
h1, h2, h3 { }

 

 

 

정리하면

 

선택자 목록은 쉼표로 관심 있는 여러 선택자를 묶어
하나의 스타일을 적용하는 CSS 문법이다.