두 개의 클래스가있는 요소에 적용되는 CSS 선택기

질문 : 두 개의 클래스가있는 요소에 적용되는 CSS 선택기

---

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

각주 :

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

출처 : https://stackoverflow.com/questions/3772290/css-selector-that-applies-to-elements-with-two-classes