CSS 선택기("A 또는 B) 및 C")?

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.

>= 2021을 읽는 사람들:

사용하여 성공을 찾았습니다.:is()선택기:

*:is(.a, .b).c{...}

아직이요, 하지만 실험 결과가 있습니다.:is()(이전의:matches()) 바로 이를 수행하는 유사 클래스 선택기:

:is(.a .b) .c {
  /* style properties go here */
}

여기와 여기에서 더 많은 정보를 찾을 수 있습니다.현재 대부분의 브라우저는 초기 버전을 지원합니다.:any()동일한 방식으로 작동하지만, 다음으로 대체될 것입니다.:is()우리는 이것을 어디에서나 사용하기 전에 조금만 더 기다리면 됩니다. (저는 반드시 그렇게 할 것입니다.

다음이 있는 경우:

<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로 변환하는 "컴파일러"를 제공하여 사이트에 배포할 수 있습니다.

언급URL : https://stackoverflow.com/questions/7517429/css-selector-a-or-b-and-c