addClass in jquery doesn't work as I want

Question

I have a code that adds a class ( .class2 ) using jQuery. The class is applied, but some styles of the class don't work :

$('.item1').addClass('class2');    

.item1 {
    font-size: 40px;
    text-align: center;
    height: 60px;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 0px 0px;
    text-decoration: none;
    color: white;
    margin: -10px 0px;
    -webkit-transition: background-color 0.4s;
    -moz-transition: background-color 0.4s;
    transition: background-color 0.4s;
}
.item1:hover {
    background-color: rgba(0, 0, 0, 0.7);
}
.class2 {
    background-color: rgba(0, 0, 0, .85);
    border: 1px solid black;
    cursor: default;
    /* background-color and border aren't applied */
}

Answer 1

That because .item1 has already a background-color and override the new background-color added by new class .class2 , so you could try to make your rule more specific like :

.item1.class2 {
   ...
   background-color: rgba(0, 0, 0, .85);
}

Hope this helps.

Answer 2

The problem isn't on jQuery. The problem is with your CSS rules.

Explanation

The browser always will apply the rule that is more specific, eg:

HTML:

<div id="my-div">
   <ul class="my-list">
      <li class="my-item">
   </ul>
</div>

CSS:

#my-div > ul > li.my-item {
    background-color: none;
}

.my-item {
    background-color: red
}

The browser will check what rule is more specific, in this case, the first one is clearly more specific.

If you want to override this rule, you must write a rule with at least the same specificity (Check this specificity calculator) .

If the rules have the exact same specificity, the last one will be applied.

Solution

Use your browser developer tools to check what rule is being applied on your element, then write a rule with at least equal specificity.

There's no a exact solution, since the entire page should be analysed.

Why not !important?

First let's understand how !important works. !important will make your rule have the highest specificity, like an "infinite" specificity.

So that rule only can be override for a rule after this one, also with !important.

Okay, this works, solve my problem, right?

Although this solve your problem right now, this practice isn't good, and will give you a very hard to maintain CSS.

If you use it on everything, you is just killing the C of CSS (Cascading Style Sheets), and you will need to rely only on rules orders, and sometimes you will just not be able to write a rule that you want.

Everyone that started using CSS thinks that the Cascade is a boring thing, that using !important on everything is fine, but isn't. Soon or later you will realize.

Answer 3

You're code is working for me (see below). Check your developer console if you're styles are overwritten by other rules. In this case, use a higher specifity , eg .item1.class2 to overwrite your already set background-color.

!important isn't a solution , but a workaround at best (it's bad practice). Try to organize your rules to have the proper order.

 // JS with jQuery $('.item1').addClass('class2'); 

 .item1 { font-size: 40px; text-align: center; height: 60px; background-color: rgba(0, 0, 0, 0.5); border-radius: 0px 0px; text-decoration: none; color: white; margin: -10px 0px; -webkit-transition: background-color 0.4s; -moz-transition: background-color 0.4s; transition: background-color 0.4s; } .item1:hover { background-color: rgba(0, 0, 0, 0.7); } .item1.class2 { background-color: rgba(0, 0, 0, .85); border: 1px solid black; cursor: default; /* background-color and border aren't applied */ } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="item1"></div> 

Answer 4

If you load jquery library, and still doesn's work. You can add !important to style so can ovveride the style, here is example of code at class2.

.class2 {
    background-color: rgba(0, 0, 0, .85) !important;
    border: 1px solid black !important;
    cursor: default !important;
    /* background-color and border aren't applied */
}

javascript jquery