CODEWITHSUNDEEP
jqueryhtmlcss
user915331
user915331

Reputation:

Multiple css styles applied to one element, how to force one style over the other

I have the following css style:

.SkdTable tr:nth-child(even) {
    background-color: #EDE7DD;
}

I also have this as well:

.SelectedSkd {
    background-color:#eedf36;
}

The latter will be applied on click event, so when a user clicks on a row I will be the selected row and shows different color:

var $selectedSkd;

function SelectedLine() {
    $(".SkdTable tbody tr").mousedown(function () {
        if ($selectedSkd!= null)
            $selectedSkd.removeClass("SelectedSkd");
        $(this).addClass("SelectedSkd");
        $selectedSkd= $(this);
    });
}

Now this works fine, except in even rows where I have set the background-color to be different, when adding the SelectedSkd style which has a different color, it doesn't show because the browser taking the first style as dominant. How to solve this?

Upvotes: 2

Views: 705

Answers (1)

Hushme
Hushme

Reputation: 3144

you should use !important in css

like .color {color:green !important;}

but its better to call the parent name because a element called with parent has more value for example

a {color:green}

but 

div a {color:red}

will be implemented

Upvotes: 4

Related Questions