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>
Use 

```
.table-striped > tbody > tr:nth-child(odd) > td.red {
    background-color:red;
    color:white;
}

```

to create more specific selector, or the !important keyword (as shown by Andrew)

Alternitvaly, and probably best, you can create a custom bootstrap configuration, which not includes table styling (Uncheck Tables in Common CSS)