CSS 선택기“(A 또는 B)와 C”?

이것은 간단해야하지만 검색어를 찾는 데 어려움이 있습니다.
내가 이것을 가지고 있다고 가정 해 봅시다.

<div class="a c">Foo</div>
<div class="b c">Bar</div>

CSS에서 "(.a 또는 .b) 및 .c"와 일치하는 선택기를 어떻게 만들 수 있습니까?

나는 이것을 할 수 있다는 것을 안다.

.a.c,.b.c {
  /* CSS stuff */
}

그러나 다양한 논리 조합을 사용하여 이러한 종류의 논리를 많이 수행해야한다고 가정하면 더 나은 구문이 있습니까?

더 좋은 구문이 있습니까?

아니요. CSS or연산자 ( ,)는 그룹화를 허용하지 않습니다. 기본적으로 선택기에서 우선 순위가 가장 낮은 논리 연산자이므로을 사용해야합니다 .a.c,.b.c.

아직은 아니지만 실험적인 :matches()의사 클래스 함수가 ​​있습니다.

:matches(.a .b) .c {
  /* stuff goes here */
}

여기 및 여기 에서 자세한 정보를 찾을 수 있습니다 . 현재 대부분의 브라우저는 초기 버전을 지원 :any()하지만 같은 방식으로 작동하지만로 대체됩니다 :matches(). 우리는 이것을 어디서나 사용하기 전에 조금 더 기다려야합니다 (확실히 것입니다).

이것이 있다면 :

<div class="a x">Foo</div>
<div class="b x">Bar</div>
<div class="c x">Baz</div>

그리고 당신은 .x( .a또는 .b) 가있는 요소 만 선택하려고합니다 .

.x:not(.c) { ... }

그러나 세 개의 "하위 클래스"가 있고 그 중 두 개를 선택하려는 경우에만 편리합니다.

하나의 하위 클래스 만 선택 (예 .a:) :.a.x

두 개의 하위 클래스 선택 (예 : .a및 .b) :.x:not(.c)

세 가지 서브 클래스 모두 선택 : .x

아니요. 표준 CSS는 원하는 종류를 제공하지 않습니다.

그러나 LESS 및 SASS 를 살펴볼 수 있습니다 .

변수, 중첩 규칙 및 기타 향상된 기능을 포함한 추가 기능을 도입하여 기본 CSS 구문을 확장하려는 두 프로젝트입니다.

그것들은 훨씬 더 구조화 된 CSS 코드를 작성할 수있게하며, 어느 쪽이든 당신의 특정 사용 사례를 거의 확실히 해결할 것입니다.

물론 어떤 브라우저도 확장 된 구문을 지원하지 않습니다 (특히 두 프로젝트마다 구문과 기능이 다르기 때문에). LESS 또는 SASS 코드를 표준 CSS로 변환하는 "컴파일러"를 제공하면됩니다. 귀하의 사이트에 배포하십시오.