CSS styles doesn't change after adding class with JavaScript

Question

I'm trying to build a selection menu and I want to change the background color of a button when it is clicked. I'm using the below code to apply the sort-select-active class to the div with sort-select id:

var selected = false;
var select= document.getElementById('sort-select')
select.onclick = (e) => {
   selected = !selected;
   if (selected)
      select.classList.add("sort-select-active");
   else 
      select.classList.remove("sort-select-active");
};

#sort-select {
  background-color: lightgray;
}

.sort-select-active {
  background-color: grey;
}

<div id="sort-contain">
 <div id="sort-select">
   Selected
  </div>
</div>

The class is successfully added to the element, but the background color doesn't change. Is there a conflict between the different background colors defined?

IDs have a priority over classes. So #sort-select is always overwriting the added class. — Esszed, Jan 05 '22 at 11:12

Youssouf Oumar · Accepted Answer · 2022-05-27T18:01:30.337

5

You set a background-color via an id, then you set another via a class, the first one will always be applied, because it has a higher specificity. Change #sort-select selector by a class in your CSS, or use inline styling like this:

var selected = false;
select.onclick = (e) => {
    selected = !selected;
    if (selected)
      slect.style.backgroundColor ="gray"
    else 
     slect.style.backgroundColor ="lightgray"
};

Also you could use !important keyword, like so :

.sort-select-active {
  background-color: grey!important;
}

edited May 27 '22 at 18:01

answered Jan 05 '22 at 11:15

Youssouf Oumar

29,373
11
46
65

Is there no way to change the priority? – user11914177 Jan 05 '22 at 11:18
1

I think so, by adding `!important` key word. I edited my answer, take a look. – Youssouf Oumar Jan 05 '22 at 11:20
1

You could also change your CSS selector to `#sort-select.sort-select-active` – Hendrik Jan 05 '22 at 11:20
Thanks, both your answers work – user11914177 Jan 05 '22 at 11:22
1

Glad I could help. – Youssouf Oumar Jan 05 '22 at 11:23

score 1 · Answer 2 · answered Jan 05 '22 at 11:20

Check this out. I added !important in the css class

var select = document.getElementById("sort-select")
var selected = false;

select.addEventListener("click", (e) => {
  selected = !selected;
  if (selected) {
    select.classList.add("sort-select-active");
  } else {
    select.classList.remove("sort-select-active");
  }

});

#sort-select {
  background-color: lightgray;
}

.sort-select-active {
  background-color: grey !important;
}

<div id="sort-contain">
  <div id="sort-select">
    Selected
  </div>
</div>

CSS styles doesn't change after adding class with JavaScript

2 Answers2