CODEWITHSUNDEEP
css
Siamak Ferdos
Siamak Ferdos

Reputation: 3299

[CSS]: Priority of two styles on a selector

I have two css styles for a table : 

<style>
    tr:nth-child(even){color:blue; background-color:gray;}
    .SelectedRow {background-color:#f8ffbc;}
</style>

On tr click I add SelectedRow class to clicked tr. On odd tr it work and change back-ground, but in even ones it doesn't work

$("tbody td[name='select']").click(function ()
{
      $("tbody tr").removeClass("SelectedRow");
      $(this).closest("tr").addClass("SelectedRow");                          
});

http://jsfiddle.net/qburkd3e/

Is there any specific priority or other things that I should know to do this?

Upvotes: 1

Views: 120

Answers (1)

Scimonster
Scimonster

Reputation: 33399

It's because of CSS selector priority. Classes and pseudo classes are worth 10, elements are 1. See http://css-tricks.com/specifics-on-css-specificity/

In your first selector, you use an element and a pseudoclass. That's a weight of 11. Your second selector is only a class, so it has a weight of 10. Hence, your first selector outweighs the second.

You can increase the second's weight by adding the element to it, to give it an identical weight. Then, the one that is later in the stylesheet takes precendence.

tr:nth-child(even){color:blue; background-color:gray;}
tr.SelectedRow {background-color:#f8ffbc;}

Upvotes: 4

Related Questions