views:

1562

answers:

4

In a page I use a tabstrip with its own stylesheets. This tabstrip writen with divs and anchors.

I add some other divs into tabs but they inherit stylesheet from the outer tabstrip. This new divs has their own css classes.

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

Tabs' CSS 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;
}

New added divs use this 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; }
+1  A: 

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

e.g. in .graphTextItem, override height and padding.

ck
good answer, thanks, but both has borders, but my new added divs combine these two styles..
Canavar
As you've posted in your answer, all divs within the second div.tabs would have the border applied unless they each overrode it.
ck
A: 

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

Jeremy French
A: 

By removing div from this stylesheet solved my problem :

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

But I still wonder whether there is a way ?

Canavar
+1  A: 

You could always try using different elements for each nested level instead of all divs:

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

In the above example you can style the div, ul and li anyway you want and you can target them individually to apply style rules. Inheritance won't be a problem.

Matthew James Taylor