Stumped by simple CSS inheritance

Question

I have what seems to be a pretty common CSS inheritance situation, but I don't understand why it isn't working as I thought it would.

Here is what the inheritance looks like as seen from the Chrome web debugger

Inherit

So I would expect my style for ".homeBox p" would override the style for "#mainContent p". And yet ...

Cancelled Style

The #mainContent p style overrides .homeBox p. What gives?

This is the correct behaviour #mainContent p is more specific than .homeBox p so it overrides the less specific one. — Bazzz
– Bazzz, Commented Feb 8, 2012 at 15:05

Curtis · Accepted Answer · 2012-02-08 15:07:47Z

2

ID styles override class styles.

For consistency purposes, I try to avoid using ID styles where possible.

Its also useful to avoid using these when you start working with server side scripting which can sometimes re-render an ID (like ASP.NET does for example).

answered Feb 8, 2012 at 15:07

Curtis

104k69 gold badges280 silver badges359 bronze badges

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

1 Comment

Jon Over a year ago

Such a simple thing I never knew. Thanks!

Supr · Accepted Answer · 2012-02-08 15:05:41Z

1

The order is first determined by specificity, and an id is more specific than a class.

answered Feb 8, 2012 at 15:05

Supr

19.1k3 gold badges33 silver badges37 bronze badges

Comments

chemick · Accepted Answer · 2012-02-08 15:08:18Z

1

It's because the #mainContent holds greater specificity than your other selectors: it's determined to be the most specific description of that element, and is chosen above class.

The rules for selector dominance are fairly complex, demonstrated in the W3 doc: http://www.w3.org/TR/CSS2/cascade.html#specificity

answered Feb 8, 2012 at 15:08

chemick

1462 bronze badges

Comments

Evert · Accepted Answer · 2012-02-08 15:13:00Z

0

specificity, as mentioned in the earlier answers, is correct. The simplest fix is to not use ids! if you have to, take that into account when writing your css for nested elements, eg:

#mainContent .homeBox p{font-size: 15px;}

answered Feb 8, 2012 at 15:13

Evert

8,6011 gold badge18 silver badges17 bronze badges

Collectives™ on Stack Overflow

Stumped by simple CSS inheritance

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related