How to make my selectors more specific?

Question

On the page, I use tabstrip with my own style sheets. This tab is written using div and anchors.

I add some other divs to the tabs, but they inherit the stylesheet from the outer tab. This new divs has its own css classes.

Here is my question, is there any way to break this inheritance without changing the css structure?

CSS Tab Styles:

div.tabs { padding: .5em; } div.tabs div.tabs { padding: 0; } div.tabs div.tabs div { clear: left; height: 4em; padding: .5em; border: 1px solid #003366; } 

Newly added divs use the following classes:

 .graphTextItem{ font-family:sans-serif; font-size:12px; border: solid 1px #78ACFF; text-align:center; width:150px; } .graphImageItem{ border-left: solid 1px #78ACFF; border-right: solid 1px #78ACFF; text-align:center; height:70px; } 

Answer 1

By removing the div from this stylesheet, I solved the problem:

 div.tabs div.tabs { clear: left; height: 4em; padding: .5em; border: 1px solid #003366; } 

But I'm still wondering if there is a way?

Answer 2

You can always try using different elements for each nested level, and not for all divs:

 <div> <ul> <li></li> </ul> </div> 

In the above example, you can stylize div , ul and li at any time, and you can customize them individually to apply style rules. Inheritance will not be a problem.

Answer 3

Override each element you need so as not to inherit your most specific classes.

eg. in.graphTextItem, override height and padding.

Answer 4

Not really. Inheritance is part of CSS. If you want to specify a specific value, specify it.