Question 35515 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

How can i override the css property of an element? – Jquery

I am trying to change the CSS property of a specific <li> element by adding a new CSS class to it.

I tried below jQuery code and it works how I want it to be.

$("li").click(function(event) {
  let active = event.target.id;
  // animation(event);
  if (active == "equal") {
    $("#" + active).css("background-color", 'hsl(6, 70%, 34%)');
  }

});
/* equals button */

ul:last-child li:last-child {
  margin: 0 4% 0 0;
  color: hsl(0, 0%, 100%);
  background-color: hsl(6, 63%, 50%);
  box-shadow: 0px 3px 0px 0px hsl(6, 70%, 34%);
}

.equalBtnAnimation {
  background-color: hsl(6, 70%, 34%);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="buttons">
  <ul>
    <li id="seven">7</li>
    <li id="eight">8</li>
    <li id="nine">9</li>
    <li id="del">Del</li>
  </ul>
  <ul>
    <li id="four">4</li>
    <li id="five">5</li>
    <li id="six">6</li>
    <li id="add">+</li>
  </ul>
  <ul>
    <li id="one">1</li>
    <li id="two">2</li>
    <li id="three">3</li>
    <li id="sub">-</li>
  </ul>
  <ul>
    <li id="aps">.</li>
    <li id="zero">0</li>
    <li id="div">/</li>
    <li id="mul">x</li>
  </ul>
  <ul class="row">
    <li class="col-5" id="reset">Reset</li>
    <li class="col-5 equalBtnAnimation" id="equal">=</li>
  </ul>
</section>

I thought that the below class will override the css properties but it doesn’t. After inspecting the code i saw this:

inspected code

This is the output:

calculator

This is the expected output i get from the above jQuery code:

calculator

instead, I would like to add it as a class. It would be a great help if someone could tell me why the above is not working…

Tags:

2

Answers


  1. 0

    For higher specificity, add the class to the first selector.

    ul:last-child li:last-child {
  margin: 0 4% 0 0;
  color: hsl(0, 0%, 100%);
  background-color: hsl(6, 63%, 50%);
  box-shadow: 0px 3px 0px 0px hsl(6, 70%, 34%);
}

ul:last-child li:last-child.equalBtnAnimation {
  background-color: hsl(6, 70%, 34%);
}
    Login or Signup to reply.
  2. 0

    Which CSS rule will be applied depends on selector specificity https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

    Use

    ul:last-child li:last-child.myNewActiveClass {
  background-color: hsl(6, 70%, 34%);
}

    Or override other rules by adding !important

    .myNewActiveClass{
    background-color: hsl(6, 70%, 34%) !important;
}

    then in JS:

    $("#" + active).addClass("myNewActiveClass");

//or if you inisist to use element style 
$("#" + active).css("background-color", 'hsl(6, 70%, 34%) !important');
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search