Change CSS class by Javascript when default class is set by ID

Question

I have a DIV that has CSS applied to it in an external stylesheet by ID, such as:

<div id="myFavoriteDIVever">Stuff</div>

#myFavoriteDIVever {
    display: none;
}

Then, in a Javascript function, I set the following class to that same DIV:

document.getElementById('myFavoriteDIVever').className = 'superCoolClass';

.superCoolClass {
    display: block;
}

For some reason, when I do it this way, the DIV is not set to display as block. It remains not displayed in the DOM. But if I change it so the DIV has a default CSS class applied to it that sets display: none; then I set a different CSS class to it with Javascript later that sets display: block; it works as expected and displays the DIV as a block element.

Why would the CSS class override the ID CSS? So, when I apply a new className it should override the #element settings. No?

Gildas.Tambo · Accepted Answer · 2015-04-11 19:20:59Z

3

Ascending order of specificity

The following list of selectors is by increasing specificity:

Universal

selectors Type

selectors Class

selectors Attributes

selectors Pseudo-classes

ID selectors

Inline style

You can overwrite it using inline-styling

document.getElementById('myFavoriteDIVever').style.display = 'block';

#myFavoriteDIVever {
    display: none;
    width: 300px;
    height: 400px;
    background: red
}

<div id="myFavoriteDIVever" class="myFavoriteDIVever">Stuff</div>

answered Apr 11, 2015 at 19:20

Gildas.Tambo

22.7k7 gold badges53 silver badges79 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

flasshy Over a year ago

Thank you! That makes sense. I wasn't aware of the priorities. I'm trying to avoid using inline styles in my Javascript so it's more easily editable.

flasshy Over a year ago

I picked your answer because you provided very useful documentation around specificity. I appreciate it very much!

beautifulcoder · Accepted Answer · 2015-04-11 19:16:40Z

2

Ids have a higher priority so adding a class will not have any effect. Your best shot is:

<div id="myFavoriteDIVever" class="myFavoriteDIVever">Stuff</div>

.myFavoriteDIVever {
    display: none;
}
document.getElementById('myFavoriteDIVever').className = 'superCoolClass';

edited Apr 11, 2015 at 19:16

answered Apr 11, 2015 at 19:13

beautifulcoder

11.4k3 gold badges21 silver badges31 bronze badges

4 Comments

Sebastian Homeier Over a year ago

The default class is unnecessary. Chaining ID and class in CSS (e.g. #myFavoriteDIVever.superCoolClass { ... } ) will do it.

flasshy Over a year ago

So, @SebastianHomeier, I'd do: #myFavoriteDIVever.hide and #myFavoriteDIVever.show . In Javascript, to change it to "show", would I just do document.getElementById('myFavoriteDIVever').className = 'show'? Does that effectively do it?

flasshy Over a year ago

Disregard. I tried it and it worked. Thank you so much! That's a clean, flexible solution.

Sebastian Homeier Over a year ago

Basically, yes. You won't need the .hide class since your ID selector already has display: none;. I just posted a simple solution.

ACruz · Accepted Answer · 2015-04-11 19:18:12Z

1

The issue isn't with your javascript, its with the CSS. There is a concept called specificity. The idea is that each CSS entry has some specificity value (1000, 100, 10, 1). The style that will be applied is the one that is the most "specific". An ID selector = 100. A class selector = 10. The id will win. Try changing the css for the class from

.superCoolClass { display: block; }

to

#myFavoriteDIVever.superCoolClass { display: block; }

answered Apr 11, 2015 at 19:18

ACruz

1012 bronze badges

Comments

Sebastian Homeier · Accepted Answer · 2015-04-11 19:34:05Z

0

This should do fine:

HTML:

<div id="myFavoriteDIVever">Stuff</div>

CSS:

#myFavoriteDIVever {
    display: none;
}

#myFavoriteDIVever.show {
    display: block;
}

JS:

document.getElementById('myFavoriteDIVever').className = 'show';

answered Apr 11, 2015 at 19:34

Sebastian Homeier

4874 silver badges14 bronze badges

Collectives™ on Stack Overflow

Change CSS class by Javascript when default class is set by ID

4 Answers 4

2 Comments

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related