Comments on: Understanding Style Precedence in CSS: Specificity, Inheritance, and the Cascade

By: Steven Bradley

Steven Bradley — Fri, 09 Dec 2011 03:47:52 +0000

Thanks Andy. Ideally you wouldn’t be using inline styles at all, but if you are they’d take precedence since they’re closer to the html element.

Interesting about the html attributes. When I wrote this post I wasn’t thinking at all about attributes or how they fit into all of this. Maybe I should do some experimenting myself and a little research and refresh this post or write a new one.

Thanks for pointing it out.

By: Andy Thomas

Andy Thomas — Wed, 07 Dec 2011 19:35:08 +0000

Great post. (Some more discussion about in-line styling would be helpful too.) It inspired me to experiment a bit.
I notice that the CSS settings based on html attributes override classes, so for instance “input:read-only” overrides “input.mycssclass”. Moreover, specifying the type of element overrides both class and attributes, so for instance “input[type="text"].mycssclass” overrides both “input:read-only” and “input.mycssclass”.

By: Steven Bradley

Steven Bradley — Wed, 16 Nov 2011 07:31:20 +0000

Glad I could help clear things up a little. Yeah, sometimes things aren’t as intuitive as we’d like.

I take it you were able to sort out the issue you had.

By: John Rayson

John Rayson — Tue, 15 Nov 2011 15:40:08 +0000

Very nicely explained, has cleared up a few things for me.

What always causes me issues is that its counter intuitive, in that styles declare further away from an element take precedence over ones declared closer. What lead me here today were these two styles:

.mimic_adminAddObject > DIV SELECT
{ width: 150px; }
.mimic_adminAddObjectSize SELECT
{ width: 70px; }
In the structure:

Crazily both were set as width 150, now at least I understand why, even though logically its wrong.

By: CSS Tips & Tricks To Take Your Site To The Next Level | Pixel2Pixel Design

Tue, 16 Aug 2011 12:37:19 +0000

[...] to a single html element, a choice must be made as to which styles to apply. This is done through CSS specificity calculations and is expressed in the form of [...]

By: Steven Bradley

Steven Bradley — Tue, 21 Jun 2011 15:06:27 +0000

Sorry it too so long to reply Eric. Your html didn’t come through in the comment. Could you post it again or email it to me. If you want to place the code here you have to use the html entity for the angle brackets.

I’m guessing the issue is that since the p is inside the div it’s forcing the div to be wider. That’s not really an issue of css precedence. Since you’re specifically setting the width on the paragraph it will be that width (200px) and overflow the div, even though the div is set to be smaller (100px)

You could set the paragraph to use max-width instead of width

p {max-width: 200px}

Then it would never get wider than it’s parent container. Of course you don’t need to set the width at all in this case.

By: eric

eric — Wed, 15 Jun 2011 22:48:14 +0000

Hi Steven, thanks for the article but I had a question:

p {width:200px;}
#a {background-color:yellow;width:100px}

abcde fghij klmno pqrst uvwxy

In the above example, whenever I open it in a browser, the width is 200px (which is the paragraph’s) even though I set the div to 100px. Could you please explain why the p is getting the precedence? Thanks

By: Totti Anh Nguyen

Totti Anh Nguyen — Fri, 20 May 2011 06:28:38 +0000

Hi Steven,

Thanks for the very nice & detailed write-up

By: zefciu

zefciu — Thu, 12 May 2011 10:30:11 +0000

You just saved my day

By: Francisc

Francisc — Fri, 06 May 2011 08:50:12 +0000

Good article, thank you.