클래스의 CSS에서 와일드 카드 *

669

스타일링하는 div가 .tocolor있지만 고유 식별자 1,2,3,4 등도 필요하므로 다른 클래스로 추가하고 있습니다 tocolor-1.

<div class="tocolor tocolor-1">   tocolor 1   </div>
<div class="tocolor tocolor-2">   tocolor 2   </div>
<div class="tocolor tocolor-3">   tocolor 3   </div>
<div class="tocolor tocolor-4">   tocolor 4   </div>

.tocolor{
  background: red;
}

단지 1 클래스를 가질 수있는 방법이 있나요 tocolor-*. *이 CSS에서와 같이 와일드 카드 를 사용해 보았지만 작동하지 않았습니다.

.tocolor-*{
  background: red;
}

css css-selectors wildcard

— 트위터
소스

1

다음은 공식 CSS3 선택자에 대한 사이트의 w3.org/TR/css3-selectors 그리고 Compability가 목록 : findmebyip.com/litmus

— GarfieldKlon

1216

필요한 것은 속성 선택기입니다. html 구조를 사용하는 예는 다음과 같습니다.

div[class^="tocolor-"], div[class*=" tocolor-"] {
    color:red 
}

대신 div임의의 요소를 추가하거나 제거 할 수 있으며 대신 class지정된 요소의 속성을 추가 할 수 있습니다.

[class^="tocolor-"]— "tocolor-"로 시작합니다.
[class*=" tocolor-"]— 공백 문자 바로 다음에 나오는 하위 문자열 "tocolor-"를 포함합니다.

데모: http://jsfiddle.net/K3693/1/

CSS 속성 선택기에 대한 자세한 내용은 여기 및 여기를 참조하십시오 . MDN Docs에서 MDN Docs

— 소 티리스
소스

2

멋진 정보. 성능에 문제가있는 경우에만주의해야합니다. 대부분의 CSS 린 터는 성능이 느린 정규 표현식 (예 : '*'사용)과 유사한 속성 선택기를 거부합니다. 전 처리기 (예 : Sass)를 사용하는 것을 제외하고 다른 가능한 방법이 있습니까?

— CodeFinity

2

클래스 속성에 여러 개의 하위 문자열이 포함되어 있는지 확인하는 방법이 있습니까? 아마도 div[class*="foo"][class="bar"]?

— 코너

우리의 "포함"예제에서 그 공간은 꽤 살인자입니다. 내가 볼 수 있듯이 거기에 없어야합니다. 맞습니까?

— 토마스

1

확인하는 데 필요합니다 @Thomas class="foo tocolor-red"일치가 아니라class="foo fromtocolor-red-blue"

— aleclarson

고마워 이 기술을 몇 년 동안 사용해 왔지만 class ^ =는 HTML 클래스 항목의 시작 부분에만 적용된다는 것을 결코 깨닫지 못했습니다. HTML 태그에 정의 된 모든 클래스 이름에 적용되었다고 생각했습니다.

— BevansDesign 19

108

예, 가능합니다.

*[id^='term-']{
    [css here]
}

로 시작하는 모든 ID가 선택됩니다 'term-'.

이 작업을 수행하지 않는 이유는이 방법을 선택하는 것이 바람직한 위치를 참조하십시오. 스타일에 관해서는, 나는 그것을 스스로하지 않을 것이지만 가능합니다.

— thomas.han
소스

를위한 것이 ID아니라이 기본 부록에 감사합니다 class.

— Khom Nazid 17:07에

26

대안 솔루션 :

div[class|='tocolor'] "tocolor-1", "tocolor-2"등 "tocolor-"로 시작하는 "class"속성 값과 일치합니다.

이것이 일치하지 않도록주의하십시오

<div class="foo tocolor-">

참조 : https://www.w3.org/TR/css3-selectors/#attribute-representation

[att|=val]

att 속성을 가진 요소를 나타냅니다. 값은 정확히 "val"이거나 "val"로 시작하고 바로 뒤에 "-"(U + 002D)입니다.

— adroitec
소스

12

class속성이로 시작하지 않는 다른 클래스로 시작 하면 작동 하지 않습니다 tocolor.

— BoltClock

1

이것은 Qt의 widget styleSheets에서도 아름답게 작동합니다. 예를 들어이라는 이름의 모든 레이블에 스타일을 적용 foo*하려면 다음과 같이하십시오.QLabel[objectName|='foo'] { ... }

— Reinstate Monica

@BoltClock이 말했듯이 요소에 여러 클래스가 있고 OP가 찾고있는 클래스로 시작하지 않으면이 솔루션이 중단됩니다.

— Dan Dascalescu

Chrome 78에서는 작동하지 않지만 * 및 ^는 작동합니다.

— Gordon Mohrin

3

div의 추가 스타일링을 위해 고유 식별자가 필요하지 않고 HTML5를 사용하는 경우 사용자 정의 데이터 속성을 사용해 볼 수 있습니다. 여기를 읽 거나 Google 검색을 시도해보십시오.HTML5 Custom Data Attributes

— DKSan
소스