Class name active/activated placement

[asasass]

@TechnoBear

Space between the class names, because one is a descendant of the other.

Because of this.

[TechnoBear]

Close enough.

The element with the class “playButtone” is a descendant of the element with class “activated”.

@PaulOB

The order is important because a child can’t come before a parent unless you have a time machine.

[asasass]

And when there’s no descendant, it’s okay to put the two classes together.

.playButtona.active

[TechnoBear]

If they’re both applied to the same element, then yes.

[PaulOB]

@asasass

.playButtone .activated

For the above to work you would need html like this:

<div class="playButtone">
  <div class="activated">Lorem ipsum</div>
</div>

@asasass

.activated .playButtone

For that to work you need html like this:

<div class="activated">
  <div class="playButtone">Lorem ipsum</div>
</div>

Can you see the difference?

[asasass]

But it’s not something that is required to do, as I have tested it. But I think it’s good to distinguish what it means when they are together or when they are separated.

[PaulOB]

@asasass

And when there’s no descendant, it’s okay to put the two classes together.

.playButtona.active

Yes and for clarity here is the html for that rule.

<div class="playButtona active">
  Lorem ipsum
</div>

… and this is also the same:

<div class="active playButtona">
  Lorem ipsum
</div>

The order of classes on the same element does not matter. It’s the order the rules were created in in the CSS that matters.

[asasass]

<div class="linkse">

Is this a descendant of linkse, or no?
playButtone

I don’t think it is.

Edit fiddle - JSFiddle - Code Playground

<div class="linkse">
  <a href="" target="_blank" title=""></a>
  <a href="" target="_blank" title=""></a>
  <a href="" target="_blank" title=""></a>
  <a href="" target="_blank" title=""></a>
  <a href="" target="_blank" title=""></a>
  <a href="" target="_blank" title=""></a>
  <a href="" target="_blank" title=""></a>
  <a href="" target="_blank"></a>
  <a href="" target="_blank" title=""></a>
  <a href="" target="_blank" title=""></a>
  <a href="" target="_blank" title=""></a>
  <a href="" target="_blank" title=""></a>
  <a href="" target="_blank" title=""></a>
  <a href="" target="_blank" title=""></a>
  <a href="" target="_blank" title=""></a>

  <div class="playButtone"

[TechnoBear]

It is a descendant if it comes after the opening tag and before the closing tag of linkse.

Is that the case?

Adjacent:

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

Descendant (parent/child):

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

[asasass]

How come the order doesn’t matter here then?

This works:
.playButtone.activated

Edit fiddle - JSFiddle - Code Playground

This works:
.activated.playButtone

Edit fiddle - JSFiddle - Code Playground

[TechnoBear]

@asasass

How come the order doesn’t matter here then?

@PaulOB

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.

[asasass]

I was getting confused between this:

Edit fiddle - JSFiddle - Code Playground

and the other code.

Edit fiddle - JSFiddle - Code Playground

[TechnoBear]

One reason not to work with multiple versions of the same code, perhaps. It’s much too easy to become confused.

Just to be sure you’re clear about what constitutes a descendant, I should maybe add that it doesn’t have to come immediately after the opening tag of the parent.

<div class="first">
   <div class="second">This is a descendant.</div>
</div>

<div class="first">
Some content here.
   <div class="second">This is a descendant.</div>
Some more content here.
</div>

<div class="first">
Some content here.
   <div class="second">This is a descendant.</div>
   <div class="third">This is also a descendant.</div>
More content here.
</div>

<div class="first">
Some content here.
   <div class="second">This is a descendant.</div>
This is content of the first (parent) div.
   <div class="third">This is also a descendant.</div>
More content here.
</div>

[Ray.H]

@Paul_Wilkins

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.

I don’t want to make things any more confusing for asasass, but a couple of weeks I did encourage not to use .active as a class name.

@Ray.H

Be aware that the class name .active can easily be confused with pseudo :active
Try to select class names that don’t conflict with established html/css elements and properties

For someone that is new to html/css the difference between a period [.] and a colon [:] can easily be overlooked. When the time comes for them to start styling anchor links, I have seen them trying to make a connection to a class they named .active

The .activated class is great and as you pointed out, it’s name explains that it ….“had been interacted with”

Another class name that could replace .active could be something like .current or maybe .live

Point being, just do all you can to avoid names that are similar to those in the list of standard pseudo-classes

Keeping the state names similar, as they are now with active/activated

.interact along with .interacted

[Paul_Wilkins]

Let’s brainstorm some ideas to potentially replace active then.

The classname is applied to the playButton element, and is set when the button is playing music, so that a pretty background is added to the playButton element.

When the button is not playing music, the classname is removed from the playButton element, removing that background.

You could get specific with names like: showBackground, or playing, but usually it’s better to use more generic names.

I do like playing for this example for the CSS declaration becomes clearly understandable:

.playButton {
  ...
}
.playButton.playing {
  ...
}

I don’t think that current would be as useful as playing, and I’m dubious about live.

Does knowing some of these details about the intended usage help to bring other potential terms to mind?

[Ray.H]

@Paul_Wilkins

I do like playing for this example for the CSS declaration becomes clearly understandable:

I agree, it’s role in the CSS is self explanatory and it blends well with .playButton

[TechnoBear]

I agree that “playing” is a good choice. The only alternative I could think of would be simply “on” and “off”.