Adding multiple classes with knockout css binding

Question

I need to add two classes to an element using the css binding.

For example:

<div class="animal" data-bind="css: mammal, dog"></div>

However this only adds the first class, "mammal".

Please could you tell me what I'm doing wrong. Thanks

data-bind="css: {mammal:true, dog:true}" or data-bind="css: mammal, css: dog" should both work. — Pieter VDE
– Pieter VDE, Commented Aug 11, 2014 at 9:50

haim770 · Accepted Answer · 2014-08-11 09:35:21Z

10

Try this:

<div class="animal" data-bind="css: {mammal:true, dog:true}"></div>

answered Aug 11, 2014 at 9:35

haim770

49.2k7 gold badges113 silver badges139 bronze badges

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

Comments

Reza · Accepted Answer · 2015-08-24 13:50:56Z

6

you can also use a string like this:

<div class="animal" data-bind="css:{'mammal dog':true}"></div>

answered Aug 24, 2015 at 13:33

Reza

1152 silver badges7 bronze badges

Hadi R. · Accepted Answer · 2019-02-15 14:28:51Z

1

you do not need to have a comma (,). just write with a space like below:

 <div data-bind="css:{'class1 class2 class3':true}"></div>

answered Feb 15, 2019 at 14:28

Hadi R.

4133 silver badges12 bronze badges