클래스 용 CSS의 와일드 카드 *

 

질문 : 클래스 용 CSS의 와일드 카드 *

---

.tocolor 스타일링하는 div가 있지만 고유 식별자 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;
}

tocolor-* 만 갖는 방법이 있습니까? 이 CSS에서와 같이 와일드 카드 *

.tocolor-*{
    background: red;
}

 

반응형

답변

---

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

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

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

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

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

CSS 속성 선택기에 대한 자세한 내용은 여기 및 여기에서 찾을 수 있습니다. 그리고 MDN 문서에서 MDN 문서

출처 : https://stackoverflow.com/questions/5110249/wildcard-in-css-for-classes