CSS properties definition overwrites Knockout js css binding

Question

I've noticed that if you define a <style> tag in your markup, like this:

 tr:nth-child(even) {background-color:#F4F4F4;}

And then you try to apply a css binding using knockout (this sets a background-color when you click on a row):

<tr data-bind="click: $parent.selectRow, css: {red:  $parent.seletedRow() == $data}">

The second one is not set since I already defined a background-color within the <style> tag.

I need to mark the even rows with a color but when you click over a row its background-color must be replaced by the css class red. Here's an example:

http://jsfiddle.net/q3Uuz/1/ Try to click on the second row and you notice the redclass is not applyed.

How can achieve this?

nemesv · Accepted Answer · 2013-07-10 11:51:32Z

1

In this case there is no need for using !important;

A more specific selector than your tr:nth-child(even) also fixes your issue

So you can write something like:

tr:nth-child(even) { background-color:#F4F4F4; }

tr.red { background-color: red; }

Demo JSFiddle.

You can read more about how the selector's specificity calculated

answered Jul 10, 2013 at 11:51

nemesv

140k16 gold badges424 silver badges364 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Artem Vyshniakov · Accepted Answer · 2013-07-09 09:06:38Z

0

You can add !important to background-color style in red class:

.red {
    background-color: red !important;
}

Here is working fiddle: http://jsfiddle.net/q3Uuz/2/

answered Jul 9, 2013 at 9:06

Artem Vyshniakov

16.5k3 gold badges46 silver badges48 bronze badges

4 Comments

nemesv Over a year ago

there is no need for !important; a more specific selector also fixes it like: tr.red { background-color: red; }

Davor Mlinaric Over a year ago

every time when you use !important, one little koala is crying because this is no more cascade style sheet.

Artem Vyshniakov Over a year ago

Agree with you guys, never again :)

anmarti Over a year ago

@nemesv please post this comment as answer.

Collectives™ on Stack Overflow

CSS properties definition overwrites Knockout js css binding

2 Answers 2

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related