요소에 두 클래스가 모두 있는 경우에만 적용할 CSS 규칙

요소에 두 클래스가 모두 있는 경우에만 적용할 CSS 규칙

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

클래스가 두 개인 요소에 적용되는 CSS Selector (3개 답변)

닫힘4년 전에.

마크업이 있다고 가정해 보겠습니다.

<div class="abc"> ... </div>
<div class="xyz"> ... </div>
<div class="abc xyz" style="width: 100px"> ... </div>

선택할 수 있는 방법이 있습니까?<div>둘 다 가지고 있는abc그리고.xyz클래스(마지막 클래스) 및 인라인 너비를 재정의하여 유효 너비를 200px로 만들 수 있습니까?

이와 같은 것:

[selector] {
  width: 200px !important;
}

div.abc.xyz {
    /* rules go here */
}

... 또는 간단히:

.abc.xyz {
    /* rules go here */
}

아래는 다음 두 클래스가 있는 모든 태그에 적용됩니다.

.abc.xyz {  
  width: 200px !important;
}

다음 두 클래스가 있는 div 태그에 적용됩니다.

div.abc.xyz {  
  width: 200px !important;
}

jQuery를 사용하여 수정을 원하는 경우

$(document).ready(function() {
  $("div.abc.xyz").width("200px");
});

프로그래밍 솔루션이 필요한 경우 jQuery에서 작동해야 합니다.

$(".abc.xyz").css("width", 200);

언급URL : https://stackoverflow.com/questions/5796654/css-rule-to-apply-only-if-element-has-both-classes