active/activated
Are specifically from the javascript.
Which is found is the web console also.
You don’t need js to write a practice lesson page on css selectors
The point here is to try to get you to understand how selectors work wether or not js adds them to the html
There was some valuable info in the links from post 15, 18 & 19
Just glaze on past them
2 Likes
This is javascript.
button.classList.remove("active");
Are you saying that active should go before playButton, and not after?
Active is in the javascript, not the html.
.active.playButtona {
background: #ffffff;
}
.active.playButtona::before,
.active.playButtona::after {
content: "";
position: absolute;
width: 198px;
height: 100%;
}
.active.playButtona::before {
left: 0;
background-color: #00ffff;
}
.active.playButtona::after {
right: 0;
background-color: #ff00ff;
}
I looked at them, but none of that talks about javascript selectors.
And every time I do a Google search, it keeps confusing active class selector in the javascript with a active link.
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.
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.
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.
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.)
1 Like
What we settled on was to use activated to indicate that something had been interacted with, which is a classname that will not be removed once it has been added.
And that active was to be used for something that will have active added and removed from it several times throughout the normal usage of it.
The name that we use doesn’t matter all that much, just so long as we’re making sure that a different name is being used to represent different types of states.
3 Likes
Ah - thank you. Obviously I’d only remembered part of that.
1 Like
I’ve found the discussion I was thinking of:
1 Like
What I’m saying or asking is, which comes first in the CSS, a javascript selector, or the html/CSS one.
is this 1st
active
and this 2nd
.playButtona
.active.playButtona {
}
or is this 1st
.playButtona
and this 2nd.
.active
.playButtona.active {
}
I understand that.
What we are saying is that whether or not the class name is added by JavaScript or written in the HTML makes no difference. The way the CSS is written will depend on the structure of your HTML, and the relationship between the two classes - whether they’re on the same element, on nested elements, or whatever.
1 Like
.active isn’t part of the html, .playButtona is.
Therefore, .playButtona would come 1st?
.active is hardcoded into the html though.
The class “active” is being added to the HTML by JS; the class “playButtona” is hard-coded in the HTML. They are both in the HTML (or they couldn’t be used) and it makes no difference how they were inserted; both are treated alike by the CSS.
Have you tried simply swapping the order around to find out what happens? If not, then try it now.
1 Like
It makes no difference which order you use in the selector when using concatanated (dot separated) multiple classes. Multiple classes on the same element can be in any order. It’s the order they are defined in the css file that will determine their specificity if there are conflicts to be resolved.
<div class="green blue pink">What color am I</div>
2 Likes
What made me rethink the order was because of this code.
.activated .playButtone {
position: absolute;
It doesn’t work like this.
.playButtone .activated {
position: absolute;
The reason why .activated comes before .playButtone here is because .activated is hard-coded into .wrap, which is a parent of .playButtone
<div class="wrap">
No, it isn’t.
I keep telling you that how the class is inserted is irrelevant.
The difference is that the structure is different. The classes are not both applied to the same element there.
The CSS is also different:
.playButtona.active
No space between the class names means these are two classes both applied to the same element.
.activated .playButtone
Space between the class names, because one is a descendant of the other.
3 Likes
That’s not multiple classes on the same element!
When you use a space between the selectors then you are targeting a descendant of that element (e.g. parent child). The order is important because a child can’t come before a parent unless you have a time machine.
This is the most basic CSS and something you would have learned in the first 5 minutes of using CSS.
When you have multiple classes on the same element then there is no parent child relationship as it is one element only. It’s a completely different thing to descendant selectors.
3 Likes
It doesn’t work like this:
.playButtone .activated
only like this:
.activated .playButtone
And why is that? (It’s now been explained several times, so I’m sure you know.)
3 Likes