[CSS]: Priority of two styles on a selector -

[CSS]: Priority of two styles on a selector -

i have two css styles table :

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

on tr click add together selectedrow class clicked tr. on odd tr work , alter back-ground, in ones doesn't work

$("tbody td[name='select']").click(function () { $("tbody tr").removeclass("selectedrow"); $(this).closest("tr").addclass("selectedrow"); });

http://jsfiddle.net/qburkd3e/

is there specific priority or other things should know this?

it's because of css selector priority. classes , pseudo classes worth 10, elements 1. see http://css-tricks.com/specifics-on-css-specificity/

in first selector, utilize element , pseudoclass. that's weight of 11. sec selector class, has weight of 10. hence, first selector outweighs second.

you can increment second's weight adding element it, give identical weight. then, 1 later in stylesheet takes precendence.

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

css