Class name active/activated placement

HTML & CSS
1

There are times when active/activated should be in-front of .playButton

In order to find out, you have to look inside the web console.

I just went through these.

I don’t think any of them need to be reversed, but I could be wrong.

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

And, reversed as in this:

.active.playButtona{
}


.activated.playButtona{
}

An example would be this code:

.activated.playButtone{
}

Can someone tell me if I have these set up correctly?

Player A
https://jsfiddle.net/q6rbLe2b/1/

.playButtona.active{
}

https://i.imgur.com/9ENUNlE.png

Player B
https://jsfiddle.net/aonbk9mo/2/

.playButtonb.activated::before {
}

.playButtonb.activated .linesb::before,
.playButtonb.activated .linesb::after {
}

https://i.imgur.com/VWrtfVC.png

Player E

This one has .linkse above it, but hardcoded on it is inactive.

<div class="linkse">

https://jsfiddle.net/sm38mr2u/2/


.playButtone.activated{
}

This one comes before play because the above is its parent.

.activated .playe {
}

https://i.imgur.com/QzNznT1.png

3

Is there a question here? If there is, perhaps you could clarify and the thread can be re-listed again. At the moment, it appears as if the forum is being used as a scratch pad, which is not its purpose.

1 Like
4

I was referring to the order that these are placed in.


.playButtona.active
5

There are times when active/activated should be in-front of .playButton.

6

I still don’t see a question that needs answering.

7

I do because I want to make sure they are positioned correctly.

8

In order to know if they are positioned correctly you have to look inside the web console.

9

10

I just provided more detail.

11

I’m sure someone will provide more input on this. But no one will be able to if it’s unlisted.

12

Is that sufficient enough information, or do I need to add more?

13

I presume you understand that a question is concluded with a question mark (?). As I look through your original post, and those posted subsequently, I see neither a question mark, nor anything that could be interpreted as one. What is it you want to know? All you’ve done in this thread so far is post what appear to be a series of loosely connected statements, none of which require an answer.

14

Now there’s a question.

15

I said it before, looking at documentation will answer many of your questions.

https://www.w3.org/TR/CSS21/selector.html#class-html

To match a subset of "class" values, each value must be preceded by a ".".

For example, the following rule matches any P element 
whose "class" attribute has been assigned a list of 
space-separated values that includes "pastoral" and "marine":

 
p.marine.pastoral { color: green }
This rule matches when class="pastoral blue aqua marine" 
but does not match for class="pastoral blue".
17

A, B, and E are set up right?

If they are set up right, then I understand.

18

Sounds like you could use a refresher on Combinators

19

This is a perfect opportunity for you to set your audio players aside for a moment.

  1. Open your editor and write a simple page with a heading, content div, some p tags in the div
  2. Set up a style sheet and write some basic selectors
  3. Then set up several class selectors , even if just to change the font color.
  4. Then use those classes to set up some descendant combinators
  5. Then you can write some double classed chained selectors (no spaces between them in the css, space in the html)
.class1.class2 {
    /* style here */
}
<div class="class1 class2">Double Class Target</div>

When you start writing some of your own test code the Lights Will Come On!

1 Like
20

It’s not going to work without the javascript.