Question: I have a problem where I need to be able to dynamically insert new search fields in a list - sorted by a particular order as defined in the HTML5 data attribute.

If I have this simple HTML code:

```
<table>
<tr>
    <td>Personel</td>
    <td>Region</td>
    <td>Misc</td>
</tr>
<tr>
    <td>
        <input type='checkbox' data-sort='3'> Name<br />
        <input type='checkbox' data-sort='4'> Gender
    </td>
    <td>
        <input type='checkbox' data-sort='1'> Country
    </td>
    <td>
        <input type='checkbox' data-sort='2'> Parent
    </td>      
</tr>
</table>

```

It will result in this simple layout with three columns:

![enter image description here](https://i.stack.imgur.com/qcYMX.png)

if I then click on for example **Name** it should add an `input` text field:

![enter image description here](https://i.stack.imgur.com/DOdxj.png)

If I then add for example the **Country** field it should add this field BEFORE the **Name** due to the sorting attribute:

![enter image description here](https://i.stack.imgur.com/HezYk.png)

And if all fields were visible:

![enter image description here](https://i.stack.imgur.com/TRer8.png)

Of course going the other way around, unchecking the checkboxes, it should remove the search field.
I have this Fiddler with the simple code, <http://jsfiddle.net/kEnye/>

Can anyone give a hint on how this can be done?

Answer: 
You need to apply `!important` after class style. because we use the selector is `.table-striped > tbody > tr:nth-child(odd) > td`, which is more specific than the class rule and will take precedence. So you need to override this with `!important`.

But there are two ways to fix this:

1. Use `!important` to make a rule more "important". I'd avoid doing this because it is confusing when you have lots of rules spread out over several files.
2. Use a higher-specifity selector for the td you want to modify. You can add an id and this will allow you to supersede the rule from the linked CSS file.

[Read css Precedence](http://www.alternategateways.com/tutorials/css/css-101/part-four-the-css-order-of-precedence)
You can apply a value of `!important` after the value you want to take precedence.