CSS doesn't change background when adding class-CodePudding

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:

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

CSS:

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

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

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?

CodePudding user response：

You set a background-color via an id, then you set an other via a class, the first one will always be applied, cause has an higher priority. Change the #sort-select id by a class, or use inline styles like so :

var selected = false;

select.onclick = (e) => {
    selected = !selected;

    if (selected)
    
      slect.style.backgroundColor ="gray"
    else 
     slect.style.backgroundColor ="lightgray"
};

or add !important word like so :

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

CodePudding user response：

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>