CODEWITHSUNDEEP
jqueryhtmlcss
Arnab
Arnab

Reputation: 414

css overriding is not working after addClass()

Before Element:

<li id="tabs-abc" class="room current" data-name="abc" data-closed="false" role="tab" data-currenttheme="bright" data-cursor="pointer" style="visibility: visible; cursor: pointer;"></li>

'.current' Css:

#tabs li.current, #tabs li:hover {
    background-color: #e5e5e5;
    border-color: #e5e5e5;
}

After this code:

this.tab.addClass('dark-tab').show();

And css:

.dark-tab {
    background-color: #C2C3C4;
}

'dark-tab' added successfully but can not override the backgournd color. For current situation I must use jquery to add this css. Any solution will be highly appreciated

Upvotes: 1

Views: 191

Answers (3)

Chris Happy
Chris Happy

Reputation: 7295

You have added it, but the initial CSS overrides it. Use one of these:

.dark-tab {
    background-color: #C2C3C4 !important;
}

#tabs li.current.dark-tab,
#tabs li.dark-tab:hover {
    background-color: #C2C3C4;
}

More info here

Update

After seeing your comment, you can set the CSS styles that will override every property that doesn't have !important by using the .css() function.

This jQuery work for you:

this.tab.css("background", "#C2C3C4").show();

If you want a other styles, like a border, you could add additional styles like this:

this.tab.css({
              "background": "#C2C3C4",
              "border": "1px solid #000"
                                      }).show();

Or as one line:

this.tab.css({"background": "#C2C3C4", "border": "1px solid #000"}).show();

Upvotes: 0

Ann
Ann

Reputation: 274

A precise definition is enought: 

    #tabs li.dark-tab, #tabs li.dark-tab.current {
        background-color: #C2C3C4;
    }

If you do not have to, do not use !important css codes.

Upvotes: 0

Michael Coker
Michael Coker

Reputation: 53674

This is because your previous selector has higher specificity.

You can change your CSS selector for .dark-tab to #tabs li.dark-tab to match the previous rule's specificity, or you can use !important to override the previous rules' specificity like

.dark-tab {
  background-color: #C2C3C4 !important;
}

Upvotes: 2

Related Questions