[css] 두 클래스를 가진 요소에 적용되는 CSS 선택기

Program / 글쓴이

두 개의 특정 클래스로 설정된 클래스 속성 값을 기반으로 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] -->

각주 :

  • 지원되는 브라우저 :
    1. 이 요소에는 class 만 있으므로 선택되지 않았습니다foo .
    2. 이 요소에는 클래스 foo와 가 모두 있으므로 선택합니다bar .
    3. 이 요소에는 class 만 있으므로 선택되지 않았습니다bar .
  • IE6 :
    1. 이 요소에 class가 없으므로 선택 하지 않았습니다 bar.
    2. bar나열된 다른 클래스에 관계없이이 요소에 class가 있으므로 선택 됩니다.

답변