정의 및 사용 방법

복합 선택자는
특정 요소를 더 세밀하게 식별하기 위해, 단일 기준으로만 요소를 선택하는 단순 선택자(Simple Selectors)를 복합적으로 구성한 선택자입니다.

기본 예제

HTML 
<ol>
    <li class="a">리스트 아이템입니다.</li>
    <li class="a" lang="en">This is list item</li>
    <li>리스트 아이템입니다.</li>
    <li>리스트 아이템입니다.</li>
</ol>
CSS 
li { /* 단순 선택자 */
    background-color: silver;
}
li.a { /* 두 개의 단순 선택자를 결합한 복합 선택자 */
    background-color: orange;
}
li.a[lang] { /* 세 개의 단순 선택자를 결합한 복합 선택자 */
    background-color: crimson;
}
li.a[lang]:hover { /* 네 개의 단순 선택자를 결합한 복합 선택자 */
    background-color: blue;
}
실제 적용된 모습

단순 선택자와 복합 선택자

HTML 요소를 CSS로 선택할 수 있는 기준은 여러 가지가 있습니다.

해당 요소의 이름으로 식별해서 선택할 수도 있고, 요소의 속성 존재 유무나 값으로도 식별해서 선택할 수도 있습니다. 또한, CSS에서는 요소와 상호 작용하거나, 요소가 특정 상태일 때에만 해당 요소에 가상의 클래스를 적용하여 요소를 선택할 수도 있습니다.

단순 선택자(Simple Selectors)

CSS의 선택자들 중에는 이러한 여러 식별 기준 중 특정한 단일 기준을 가지고 요소를 선택하는 선택자들이 있는데 이러한 선택자들을 단순 선택자라고 합니다.

단순 선택자의 종류는 다음과 같습니다.

단순 선택자의 종류
* 모든 요소 선택
* 선택자(전체 선택자, universal selector)는 문서의 모든 요소를 선택합니다.
element 요소 이름을 기준으로 선택
element(요소) 선택자는 지정된 요소 이름을 가진 모든 요소를 선택합니다. 예를 들어, h2는 문서내의 모든 <h2> 요소를 선택하는 선택자입니다.
속성 선택자 속성의 존재와 값을 기준으로 요소 선택
CSS에서는, HTML 요소에 지정된 특정 속성 존재 여부와 그 값에 따라 요소를 선택할 수 있는 속성 선택자들이 있습니다.
클래스 선택자 (.class) class 속성과 그 값을 기준으로 요소 선택
.class 선택자는 지정된 class 이름의 클래스가 있는 요소를 모두 선택합니다. '.' 바로 다음에 지정할 class 이름을 붙이면, 이 이름의 클래스가 있는 모든 요소를 나타냅니다.
아이디 선택자 (#id) id 속성과 그 값을 기준으로 요소 선택
#id 선택자는 지정된 id 값과 일치하는 id 속성을 가진 요소를 선택합니다. '#' 바로 다음에 지정할 id 값을 붙이면, 이 값과 일치하는 id 속성을 가진 요소를 나타냅니다.
가상 클래스 상호작용 및 상태 기반을 기준으로 요소 선택
CSS에서는 사용자가 HTML 요소와 상호 작용하거나, 요소가 특정 상태일 때에만 해당 요소에 가상의 클래스를 적용하여 요소를 선택하는 가상 클래스 선택자가 있습니다.

복합 선택자(Compound Selectors)

복합 선택자는 단일 기준을 가지고 요소를 선택하는 단순 선택자를 복합적으로 구성한 선택자입니다.
즉, 두 개 이상의 단순 선택자를 나열하여 특정 요소를 단일 기준이 아닌 여러 기준에 동시에 만족할 수 있게 세밀하게 식별하여 요소를 선택할 수 있습니다.

복합 선택자의 구문
  • 두 개 이상의 단순 선택자를 연속으로 붙여서 나열합니다.
  • 선택자와 선택자 사이에는 공백(띄어쓰기)같은 선택자 결합 기호(Combinators)가 포함되어 있지 말아야 합니다.
  • 두 개 이상의 선택자 중에서 * 또는 element 선택자가 있을 경우에는 다른 선택자보다 나열 순서에서 먼저 와야 합니다. 이 두 선택자를 제외한 선택자들의 나열 순서는 상관이 없습니다.
  • *와 element는 순서와 상관없이 동시에 나열될 수 없습니다.
복합 선택자와 선택자의 구체성 값(specificity, 명시도)

복합 선택자는 단순 선택자를 여러 개 결합하여 구성되기 때문에, 선택자의 구체성 값 또한 각 단순 선택자의 구체성 값(specificity, 명시도)을 합산한 결과로 계산됩니다.

즉, 복합 선택자는 내부에 포함된 단순 선택자들의 구체성 값이 더해져 보다 구체적인(더 높은 specificity를 가지는) 선택자가 됩니다.

예를 들어 아래의 선택자들을 비교해 보겠습니다.

CSS 
li               /* 구체성 값: 0,0,0,1 */
li.a             /* 구체성 값: 0,0,1,1 */
li.a[lang]       /* 구체성 값: 0,0,2,1 */
li.a[lang]:hover /* 구체성 값: 0,0,3,1 */

위 예제에서 볼 수 있듯, 단순 선택자 li, .a, [lang], :hover 각각의 구체성 값이 누적되어 계산됩니다.
이처럼 복합 선택자는 여러 단순 선택자를 결합함으로써 특정 요소를 더 세밀하게 식별할 수 있을 뿐 아니라, 스타일 우선순위에서도 더 높은 구체성을 가집니다.

명세서

복합 선택자의 명세서 사양
명세서 사양
compound selector Selectors Level 4
#compound

같이 보기