CSS 다중 선택자 (,) – 여러 선택자가 동일한 선언을 공유

다중 선택자 : 선택자A`,` 선택자B

여러 선택자가 동일한 선언을 공유하는 경우 쉼표(,)로 구분된 목록으로 연결하여 그룹화할 수 있습니다.

선택자A, 선택자B 형태의 선택자로,
두 개의 복합 선택자를 구분하는 콤마 기호(,)가 있으며, 선택자A와 선택자B가 동일한 선언을 공유합니다.

이를 '다중 선택자'나 '그룹 선택자'라고 흔히 부르며, 명세서에서는 공식적으로 'Selector list(선택자 목록)'라고 합니다.

구문

선택자 뒤에 콤마 기호(,)로 구분된 다음의 선택자를 연결하여 여러 선택자 목록으로 그룹화할 수 있습니다. 이렇게 하면 스타일 선언을 공유할 수 있습니다.

다음의 두 가지 스타일 선언은 동일합니다.

CSS

h1 {
    font-family: serif;
    color: red;
}
h2 {
    font-family: serif;
    color: red;
}
h3 {
    font-family: serif;
    color: red;
}

/* 다음의 스타일 선언과 동일합니다. */

h1, h2, h3 { /* h1, h2, h3 선택자에 동일한 스타일 공유 */
    font-family: serif;
    color: red;
}

장점

위 코드 예제에서 보듯이 '다중 선택자'는 쉼표(,)로 구분된 목록 내의 여러 선택자에 동일한 스타일을 적용할 때 코드가 간결해져서 읽기 쉽고 관리하기도 쉬워집니다. 그리고, 여러 선택자에 동일한 스타일을 적용하므로 일관된 디자인을 유지할 수 있으며, 스타일 변경 시 한 곳만 수정하면 되므로 유지보수가 쉽다는 여러 장점이 있습니다. 또한, 반복적인 스타일 정의를 줄여서 CSS 파일의 크기를 줄일 수 있으며, 이는 웹 페이지 로딩 속도에 긍정적인 영향을 미칠 수 있습니다.

단점

'다중 선택자'는 여러 선택자에 동일한 스타일을 적용할 수 있는 장점이 있으나, 목록 내의 선택자 중에서 하나라도 브라우저가 지원하지 않은 선택자(예를 들면, 잘못 작성된 선택자)가 있으면 전체 목록을 무효화한다는 단점이 있습니다.

예를 들어, 다음에 작성된 선택자는 잘못 작성된 것으로 브라우저가 지원하지 않습니다.

CSS

...class {
    font-family: serif;
    color: red;
}
/* ...으로 시작하는 클래스 선택자(...class)는 없습니다. 
  .class로 작성해야 하는 것을 잘못 작성한 것입니다. */

. 바로 다음에 지정할 class 이름을 붙이면, 이 이름의 클래스가 있는 모든 요소를 나타냅니다. 하지만 위의 예제에서는 .class로 작성해야 하는 것을 ...class으로 잘못 작성한 것입니다. CSS에서 이러한 유형의 선택자는 없습니다.

위 예제에서 다룬 선택자를 '다중 선택자'에 적용해 보겠습니다.

CSS

h1, ...class , h2, h3 {
    font-family: serif;
    color: red;
}
/* '다중 선택자' 목록 내의 잘못된 선택자(...class)로 인해서
   h1과 h2, h3 모두가 스타일 선언이 무효화됩니다. */

이처럼, 목록 내의 선택자 중에서 하나라도 브라우저가 지원하지 않은 선택자가 있으면 전체 목록을 무효화한다는 단점이 있으므로 주의해야 합니다.

구문과 관련된 참고 사항

쉼표(,)로 구분된 목록을 한 줄에 배치할 수도 있고 여러 줄에 배치할 수도 있습니다.

CSS

/* 한 줄에 배치 */
h1, h2, h3 {
    font-family: serif;
    color: red;
}

/* 여러 줄에 배치 */
h1,
h2,
h3 {
    font-family: serif;
    color: red;
}

목록을 한 줄에 배치할 경우 두 개의 복합 선택자를 구분하는 콤마 기호(,)의 앞과 뒤의 띄어쓰기는 선택사항이지만 시각적으로 쉽게 구별하기 위해 띄어쓰는 것을 권장합니다.

CSS

/* 목록을 한 줄에 배치할 경우
   콤마 기호(>) 앞과 뒤의 띄어쓰기는 선택사항이지만
   시각적으로 쉽게 구별하기 위해 띄어쓰는 것을 권장합니다. */
   
h1,h2,h3 { /* 권장하지 않음 */
    font-family: serif;
    color: red;
}
h1, h2, h3 { /* 권장함음 */
    font-family: serif;
    color: red;
}

목록 내의 마지막 선택자 뒤에 콤마 기호(,)가 있으면 전체 목록을 무효화하기 때문에 주의해야 합니다.

CSS

/* 한 줄에 배치 */
h1, h2, h3, {
    font-family: serif;
    color: red;
}

/* 여러 줄에 배치 */
h1,
h2,
h3, {
    font-family: serif;
    color: red;
}

/* 목록 내의 마지막 선택자(h3) 뒤에 콤마 기호(,)가 있으면 
   전체 목록을 무효화하기 때문에 주의해야 합니다.
   h1과 h2, h3 모두가 스타일 선언이 무효화됩니다.*/