복잡한 CSS 선택자 그룹화 시 오류

그룹화 시 쉼표로 구분된 모든 것은 완전한 선택자여야 합니다. 어디서 실수할 수 있는지 살펴보겠습니다.

다음과 같은 코드가 있다고 가정해 보겠습니다:

css#block h2 {
  color: red;
}
#block h3 {
  color: red;
}

두 선택자를 하나로 그룹화해 보겠습니다. 다음은 그룹화의 올바른 예입니다:

css#block h2, #block h3 {
  color: red;
}

다음은 그룹화의 잘못된 예입니다:

css#block h2, h3 {
  color: red;
}

이 잘못된 그룹화 예에서 초보자들은 왠지 #block이 h2와 쉼표 뒤에 있는 h3 모두에 적용된다고 생각합니다. 하지만 선택자는 쉼표를 통해 동작하지 않으며 사실상 이 잘못된 그룹화 예는 다음과 같이 다시 작성할 수 있습니다:

css#block h2 {
  color: red;
}
h3 {
  color: red;
}

축약하기 시작한 원래 버전과 비교해 보세요:

css#block h2 {
  color: red;
}
#block h3 {
  color: red;
}

css#block h1 {
  text-align: center;
}
#block h2 {
  text-align: center;
  color: blue;
}
#block h3 {
  text-align: center;
  font-size: 16px;
  color: red;
}

css#block h1.eee {
  text-align: center;
  font-size: 30px;
}
#block h2.zzz {
  text-align: center;
  font-size: 20px;
}

css.xxx .kkk {
  text-align: center;
}
.eee h2.zzz {
  text-align: center;
}
#eee h2 {
  text-align: center;
}

css.eee h2.zzz {
  text-align: center;
}
.xxx {
  text-align: center;
}