How do I make my selectors more specific?

Question

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; }

Matthew James Taylor · Accepted Answer · 2009-04-15 01:09:02Z

4

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.

answered Apr 15, 2009 at 1:09

Matthew James Taylor

4,8965 gold badges31 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

cjk · Accepted Answer · 2009-04-14 12:35:45Z

2

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

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

answered Apr 14, 2009 at 12:35

cjk

46.6k9 gold badges83 silver badges113 bronze badges

2 Comments

Canavar Over a year ago

good answer, thanks, but both has borders, but my new added divs combine these two styles..

cjk Over a year ago

As you've posted in your answer, all divs within the second div.tabs would have the border applied unless they each overrode it.

Jeremy French · Accepted Answer · 2009-04-14 12:37:07Z

2

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

answered Apr 14, 2009 at 12:37

Jeremy French

12.3k6 gold badges48 silver badges73 bronze badges

Comments

Canavar · Accepted Answer · 2009-04-14 19:59:05Z

0

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 ?

edited Apr 14, 2009 at 19:59

answered Apr 14, 2009 at 12:42

Canavar

48.1k17 gold badges94 silver badges126 bronze badges

Collectives™ on Stack Overflow

How do I make my selectors more specific?

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related