Specific question on CSS Specificity

Question

I have a very specific question on CSS Specificity, something which I could not clearly understand on; http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

If I have 2 selectors which define non-contradicting properties/attributes, will both of the attributes still get applied OR the way it works is, it just compares the selectors, without bothering what is defined inside them.

So if we have;

.menu1 {color:red}
p.menu1 {font-size:10px}

Here both the selectors refer to "menu1", but define unrelated attribues (color/font-size)

So my question is does the Specificity still matter and only 1 of the 2 will be considered ? My question is more about how the actual implementation happens.

Dave Everitt · Accepted Answer · 2011-08-23 11:51:39Z

1

No, in this case the specificity does not matter as you are simply adding an extra property to the menu1 class, which isn't changing any existing rules. However, if you reverse the order of the rules and attempt to override color:

p.menu1 {color:blue}
.menu1 {color:red}

then the less specific rule .menu1 {color:red} will not override the more specific p.menu1 {color:blue}, even though the 'red' rule appears after the 'blue' rule (try it out).

Of course, if you change the second rule to p.menu1 {color:red} it will override, as the two rules would then have the same specificity.

answered Aug 23, 2011 at 11:51

Dave Everitt

17.9k8 gold badges69 silver badges101 bronze badges

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

1 Comment

copenndthagen Over a year ago

You seem to have hit the nail on the head...Your answer is exactly what I was looking for...Thx a lot..

BoltClock · Accepted Answer · 2011-08-23 11:54:47Z

1

In the article's overview, point 11 says:

11. The last rule defined overrides any previous, conflicting rules.

(where "last rule" may be replaced with "last or most specific rule")

So if there are different properties then nothing is overridden. The two rules are combined, so p.menu1 will all have a font size of 10 pixels and be red in color. The second rule still has a more specific selector, but it's simply not relevant until you specify a common style that will potentially be overridden.

How all of this is done in implementation is, well, an implementation detail, so I don't know.

edited Aug 23, 2011 at 11:54

answered Aug 23, 2011 at 11:37

BoltClock

728k165 gold badges1.4k silver badges1.4k bronze badges

1 Comment

BoltClock Over a year ago

Bear in mind that elements with class="menu1" but are not p elements will only be red in color; their font size may not be 10 pixels because they won't respond to the p.menu1 selector.

Collectives™ on Stack Overflow

Specific question on CSS Specificity

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related