CSS styles priority

Question

There is the following HTML:

<li class="tabs__item tabs__item_with_new_orders">123</li>

I want to do the following ones:

1. To set "tabs_item" CSS properties
2. Set background property from "tabs__item_with_new_orders" CSS class

Firebug shows me that this class is applied successfully:

.tabs__item:nth-child(4n+2) {
    background: none repeat scroll 0 0 #89c4bb;
}

My class is crossed in Firebug! And background property from "tabs__item_with_new_orders" are not applied. How can I fix it? I can use "!important" property to set priority, but I don't want to do it.

Answer 1

Use

.tabs__item:nth-child(4n+2) {
    background: none repeat scroll 0 0 #89c4bb;
}

.tabs__item.tabs__item_with_new_orders {
    background: #000;
}

This way the background should be black because it gets overriden.

Answer 2

Avoid undescores in class and id. Why?:

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Underscores_in_class_and_ID_Names