CSS - 동일한 html 태그의 클래스를 사용하여 div 스타일 지정

Question

나는 부모를 클릭하면 표시되는 드롭 다운 메뉴가 있습니다.

<div class="dropdown"></div> 

HTML 내가 HTML에 클래스 (.active)를 추가 할 jQuery를 사용하고이 작업을 수행합니다.

는

if ($(e).children('.dropdown').hasClass('active')) { 
    $(e).children('.dropdown').removeClass('active'); 
    return; 
} 
$('.dropdown').removeClass('active'); 
$(e).children('.dropdown').addClass('active'); 
return; 

이 글을 쓰는 동안 JS/jQuery를, 나는 발생할 수있는 문제가 발생했습니다. CSS 코드를 갖는

는 다음과 같이 :

.dropdown{ 
    /*dropdown styles*/ 
} 

.active{ 
    /*active styles*/ 
} 

는 가능성 잎 내가 다른 태그 .active를 사용하는 경우, 두 가지 스타일이 충돌 할 수있다.

.parent .active{ 
    /*active styles*/ 
} 

그러나, 말 :

나는 빨리 .active이었다 따라서 내가 찾은 솔루션 중 하나 .dropdown

의 자식이 아닌 것처럼

.dropdown .active{ 
    /*active styles*/ 
} 

작동하지 않는 것을 배웠다 그 .parent 클래스는 클릭했을 때 스타일을 변경하는 또 다른 자식이 있습니다 (검색 할 스타일을 지정해야합니다).을 적용합니다. 그것에은 드롭 다운을 줄 것이다 .active 스타일. 같은 고유 한 각 .active 뭔가 이름)

1 :

.parent{ 
    /*parent styles*/ 
} 
.dropdown{ 
    /*dropdown styles*/ 
} 
.active{ 
    /*DROPDOWN active styles*/ 
} 
.click-me-button{ 
    /*default button to be clicked so as to be restyled*/ 
} 

(잘하면 그 의미가 있습니다) 나는이 두 가지 솔루션을 발견했습니다

: 그 조금 혼란이라면,이 예제를 참조 .dropdown-active 및 .click-me-button-active; 그러나, 나는 더 많은 타이핑이 필요하기 때문에이를 사용하지 않는다. (당신이 원한다면 나를 게으르게 부름)

2) .dropdown[class="dropdown active"];

`.dropdown[class*="active"]` or `.dropdown[class~="active"]` 

그들 모두가 보인다 :

<div class="dropdown blue active"> 

또는

<div class="dropdown active blue"> 

은 내가 찾은 다음 한이 모두를 극복하기 위해 : 그러나, 이것은 <div>이 보이는 경우 중단됩니다 똑같이하십시오.

내가이 질문을 알아 내려고 시도하고있다 : 당신이 생각하는 이상

Answer 1

의 어떤의, 최고의 preformance 현명한 선택이 될 것이 무엇을 할 수있는 올바른 방법이 무엇인지

.dropdown.active { 
    text-decoration:underline; 
} 

주 .dropdown와 .active 사이의 공간의 부족 : '같은 뭔가를 찾고있는.