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: 
Specificity
===========

Your issue is most likely regarding specificity. Chris Coyier has a great article on [CSS specificity](http://css-tricks.com/specifics-on-css-specificity/). I would also suggest you check out this handy [specificity calculator](http://specificity.keegan.st/).

Using that calculator, we can see that `.table-striped > tbody > tr:nth-child(odd) > td` has a specificity of 23. As such, to override that, any new rule needs to have a specificity of something equal to or greater than 23. `.red` is at 10, so that isn't going to cut it.

In this case, it should be as simple as matching the existing specificity, and then adding your class to it. `.table-striped > tbody > tr:nth-child(odd) > td.red` gives us a specificity of 33. As 33 is greater than 23, your rule should now work.

See a working example here: <http://bootply.com/91756>

!important
==========

In general, you should never use `!important` unless you never want that rule to be overridden. `!important` is basically the nuclear option. I am moderately confident in saying that if you understand specificity, you should never need to `!important` to make a custom rule work properly in a framework like Bootstrap.

### Update

After a bit of thought, the rule I provide here is probably a bit too specific. What happens if you want to higlight a cell on a table that isn't stripped? To make your rule a bit more global while still having enough specificity to work in stripped tables, I would go with `.table > tbody > tr > td.red`. This has the same specificity as the Bootstrap stripping, but will also work on tables that are not zebra stripped. Updated example is here: <http://bootply.com/91760>
I had a similar problem, also after using `!important` the problem stayed. 

The problem depends on which browser we are using, in my case it was Chrome.
Normally chrome stores frequently used sites and does not always fully page reload.

The issue was solved only after clearing the chrome history or `Ctrl`+`Shift`+`R`.