여러 클래스를 기준으로 요소 선택

여러 클래스를 기준으로 요소 선택

태그에 클래스가 두 개일 때 적용하고 싶은 스타일 규칙이 있습니다.자바스크립트 없이 이것을 수행할 수 있는 방법이 있습니까?즉, 다음과 같습니다.

<li class="left ui-class-selector">

다음과 같은 경우에만 스타일 규칙을 적용합니다.li둘 다 있습니다.left그리고..ui-class-selector적용된 클래스입니다.

두 개의 수업을 말하는 건가요?셀렉터를 "사슬로 묶습니다"(둘 사이에 공백이 없어야 함).

.class1.class2 {
    /* style here */
}

이 옵션을 사용하면 다음과 같은 모든 요소가 선택됩니다.class1그것 또한 가지고 있습니다.class2.

당신의 경우:

li.left.ui-class-selector {

}

공식 문서: CSS2 클래스 선택기.

---

Kakamike가 Internet Explorer 6에서 이 방법의 문제를 지적했듯이 다음을 읽고 싶을 수도 있습니다.IE6 CSS에서 이중 클래스를 사용하시겠습니까?

체인 선택기는 클래스에만 국한되지 않으며 클래스와 ID 모두에 대해 수행할 수 있습니다.

반

.classA.classB {
/*style here*/
}

클래스 & ID

.classA#idB {
/*style here*/
}

아이디 & 아이디

#idA#idB {
/*style here*/
}

IE 6을 제외한 현재 모든 양호한 브라우저가 이 기능을 지원하며, 목록의 마지막 선택기를 기준으로 선택합니다.따라서 ".classA.classB"는 ".classB"만을 기준으로 선택합니다.

당신의 경우를 위하여

li.left.ui-class-selector {
/*style here*/
}

또는

.left.ui-class-selector {
/*style here*/
}

다음 솔루션을 사용할 수 있습니다.

CSS 규칙은 다음 두 가지 클래스를 가진 모든 태그에 적용됩니다.

.left.ui-class-selector {
    /*style here*/
}

CSS 규칙은 다음을 포함하는 모든 태그에 적용됩니다.<li>다음 두 가지 클래스가 있습니다.

li.left.ui-class-selector {
   /*style here*/
}

jQuery 솔루션:

$("li.left.ui-class-selector").css("color", "red");

Javascript 솔루션:

document.querySelector("li.left.ui-class-selector").style.color = "red";

언급URL : https://stackoverflow.com/questions/2554839/select-element-based-on-multiple-classes