클래스 이름이 특정 문자열로 시작하는 모든 요소와 일치

클래스 이름이 특정 문자열로 시작하는 모든 요소와 일치

이 질문에는 이미 다음과 같은 답변이 있습니다.

클래스 접두사별 CSS 셀렉터가 있습니까? (4개 답변)

닫힘8년 전에.

CSS3에서 특정 문자열로 시작하는 클래스 이름을 가진 요소에 대해 "와일드카드"를 사용할 수 있습니까?

예:

<div class="myclass-one"></div>
<div class="myclass-two"></div>
<div class="myclass-three"></div>

마법처럼 모든 걸 설정해 놓았습니다.div한 번에 저장:

.myclass* { color: #f00; }

다음과 같은 방법을 사용해야 합니다.

div[class^='myclass'], div[class*=' myclass']{
    color: #F00;
}

---

편집: 와일드카드 추가(*David가 제안한 대로

질문에 대한 직접적인 답변은 아니지만 대부분의 경우 각 요소에 여러 클래스를 간단히 설정할 것을 제안합니다.

<div class="myclass one"></div>
<div class="myclass two"></div>
<div class="myclass three"></div>

이 방법으로 모두에 대한 규칙을 설정할 수 있습니다.myclass요소 및 보다 구체적인 규칙one,two그리고.three.

.myclass { color: #f00; }

.two { font-weight: bold; }

etc.

div에 여러 클래스를 쉽게 추가할 수 있습니다.그래서:

<div class="myclass myclass-one"></div>
<div class="myclass myclass-two"></div>
<div class="myclass myclass-three"></div>

그런 다음 CSS에서 공유 클래스로 호출하여 동일한 스타일을 적용합니다.

.myclass {...}

그리고 다른 수업은 다음과 같이 사용할 수 있습니다.

.myclass-three {...}

또는 CSS에서 더 구체적으로 설명하고 싶다면 다음과 같습니다.

.myclass.myclass-three {...}

언급URL : https://stackoverflow.com/questions/13352080/match-all-elements-having-class-name-starting-with-a-specific-string