두 개의 특정 클래스로 설정된 클래스 속성 값을 기반으로 CSS로 요소를 선택하는 방법이 있습니까? 예를 들어 3 div가 있다고 가정 해 보겠습니다.
<div class="foo">Hello Foo</div>
<div class="foo bar">Hello World</div>
<div class="bar">Hello Bar</div>
foo 및 bar 클래스의 멤버라는 사실에 따라 목록의 두 번째 요소 만 선택하기 위해 어떤 CSS를 작성할 수 있습니까?
답변
두 클래스 선택기를 연결하십시오 (공백 없음).
.foo.bar {
/* Styles for element(s) with foo AND bar classes */
}
IE6와 같은 고대 브라우저를 처리 해야하는 경우 연결된 클래스 선택기를 올바르게 읽지 못합니다. 목록에 다른 클래스가 있는지 여부에 관계없이 마지막 클래스 선택기 ( .bar
이 경우) 만 읽습니다 .
다른 브라우저와 IE6가이를 해석하는 방법을 설명하려면 다음 CSS를 고려하십시오.
* {
color: black;
}
.foo.bar {
color: red;
}
지원되는 브라우저의 출력은 다음과 같습니다.
<div class="foo">Hello Foo</div> <!-- Not selected, black text [1] -->
<div class="foo bar">Hello World</div> <!-- Selected, red text [2] -->
<div class="bar">Hello Bar</div> <!-- Not selected, black text [3] -->
IE6의 출력은 다음과 같습니다.
<div class="foo">Hello Foo</div> <!-- Not selected, black text [1] -->
<div class="foo bar">Hello World</div> <!-- Selected, red text [2] -->
<div class="bar">Hello Bar</div> <!-- Selected, red text [2] -->
각주 :
- 지원되는 브라우저 :
- 이 요소에는 class 만 있으므로 선택되지 않았습니다
foo
. - 이 요소에는 클래스
foo
와 가 모두 있으므로 선택합니다bar
. - 이 요소에는 class 만 있으므로 선택되지 않았습니다
bar
.
- 이 요소에는 class 만 있으므로 선택되지 않았습니다
- IE6 :
- 이 요소에 class가 없으므로 선택 하지 않았습니다
bar
. bar
나열된 다른 클래스에 관계없이이 요소에 class가 있으므로 선택 됩니다.
- 이 요소에 class가 없으므로 선택 하지 않았습니다