CSS - Styling div using classes in same html tag

Question

I have a dropdown wherein when you click on the parent, it gets displayed.

HTML

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

To do this I am using jQuery to add a class ( .active ) to the html.

JS/jQuery

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

While writing this, I encountered a problem which could occur.

Having the CSS code look like this:

.dropdown{
  /*dropdown styles*/
}

.active{
  /*active styles*/
}

Leaves the possibility if I use .active for another tag, the two styles could clash.

I quickly learned that

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

does not work as .active is not the child of .dropdown

Thus one of the solutions I found was:

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

However, if say that .parent class has another child which changes styles when clicked (which needs to be styled searately), applying .active to it would give the dropdown .active styles. If that was a little confusing, see this example:

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

(hopefully that makes sense)

I've found two solutions for this:

1) name each .active something unique, like .dropdown-active and .click-me-button-active ; however, I am against using this as that requires more typing (call me lazy if you will)

2) use .dropdown[class="dropdown active"] ; however, this will break if the <div> looks like this:

<div class="dropdown blue active">

or

<div class="dropdown active blue">

To overcome both of this I've found the following:

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

they both seem to work the same.

What I am trying to figure out with this question is: what is correct way to do this and what will be the best preformance-wise choice, of ANY of the above

Answer 1

I think you're looking to do something like:

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

Note the lack of space between .dropdown and .active .