CSS doesn't change background when adding class

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 this code:

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

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

And I try to apply the sort-select-active class to my sort-select div using this JS code:

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

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

yousoumar · 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

yousoumar

7,434
4
9
33

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. – yousoumar 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. – yousoumar 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 doesn't change background when adding class

2 Answers2