4lackof 4lackof - 4 months ago 7
CSS Question

CSS - Styling div using classes in same html tag

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

I think you're looking to do something like:

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

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