Class name active/activated placement

[TechnoBear]

@asasass

As I understand it, they would only need to be reversed if there was a class above it.

Your terminology is confusing. I don’t know whether you understand the issue but are explaining it poorly, or whether you are still confused, so let me try to explain again.

@TechnoBear

Are you seriously saying that after all this time, you are still unable to distinguish the difference between one div inside another:

<div class="first">
   <div class="second">
   </div>
</div>

and one div after another:

<div class="first"></div>
<div class="second"></div>

You are referring to one div as being “above” another when that div is actually the parent of the other. The opening tag of the first div may be above the second, but the closing tag comes after it.

It is very important that you understand the difference between adjacent and nested divs (and other elements), in order to target them correctly with CSS.

@asasass

I looked at them, but none of that talks about javascript selectors.

You don’t need JavaScript to follow @Ray.H’s advice and try playing with some selectors. The fact that in your audio code one of the classes is being injected by JS is simply a red herring here.

Use my two examples, add a bit of text or an image as content, and then play about with the CSS rules and see how different rules affect the two different constructions.

@asasass

And every time I do a Google search, it keeps confusing active class selector in the javascript with a active link.

I believe @Paul_Wilkins pointed out some time ago the potential for confusion over your choice of class name. Did you not change it elsewhere to “activated”, for this very reason? (Your chosen class name is not a part of JS, so Googling for it is unlikely to get you very far.)