2 replies [Last post]
me224488
me224488's picture
Offline
newbie
Last seen: 9 years 6 weeks ago
Timezone: GMT-5
Joined: 2013-12-14
Posts: 1
Points: 2

I'm trying to understand CSS specificity, and have read all the info I can find online, but still cannot understand why in the below code, the #RedPlease ID doesn't take priority over h2 and make everything red. I thought ID selectors were more specific than elements (h2 below would fall under this correct?). I'm interested in the reasoning behind why the below example is working the way it is. Thanks for your help and your patience with the super basic nature of this question!

<div id="RedPlease">
	<h2>Header Two Why Are You Green?</h2>
    <p>This is a paragraph.  Why is my ID tag not making that header red?</p></div>
 
h2 { background-color: lime; }
#RedPlease { background-color: red; }

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 47 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Because it's doing what you told it

Specificity is not the issue. The issue is that the background is not inherited. The <p> appears to have a red background because the default value is transparent.

See http://www.w3.org/TR/css3-background/#the-background-color

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

basie88
basie88's picture
Offline
newbie
lhr
Last seen: 9 years 6 weeks ago
lhr
Timezone: GMT+5
Joined: 2013-12-18
Posts: 1
Points: 1

what a great work.

what a great work.