CSS :hover ONLY when there are two classes

Question

I'm trying to only apply the CSS :hover selector when two different classes are attached to a div. I've tried this, but this gets rid of the hover effect.

.accordionButton .cyan:hover{
    color: cyan;    
}

I also cant do this:

.accordionButton:hover, .cyan:hover{
    color: cyan;    
}

because I have two other colors I am trying to do this with as well.

Basically, is there any way to make the CSS apply only when one hovers over a div that is both an .accordionButton AND a .cyan?

Answer 1

You can combine class selectors by chaining them without spaces.
In the example below, the :hover declaration is applied only to elements with both classes:

.accordionButton.cyan:hover {
  color: cyan;
}

<div class="accordionButton">Only Button</div>
<div class="cyan">Only Cyan</div>
<div class="accordionButton cyan">Both Classes</div>

For reference, see MDN:
Target an element if it has more than one class applied.

You can apply multiple classes to an element and ... only select the element when all of the classes in the selector are present.

We can tell the browser that we only want to match the element if it has all of these classes by chaining them together with no white space between them.

Answer 2

If you put space between classes in selector, like you did, that will select all elements with class cyan that are descendants of elements with class accordionButton. Remove the space if you want to refer to the same element.