CSS Specificy - Rookie question

speakerman

06-25-2010, 08:01 AM

Hi there,

I am new to this forum and I just starded to learn CSS. I am struggling with the following and would appreciate every help very much. I learned that the id selector is more specific than the tag selector. Therefore, the style applied to an id selector should overwrite the style of a tag selector. I tried that in the following code but it does not work. In the div bottom tag, only the p tag is overwritten by the div style. The h1 and body style is not affected. Why?? Thanks a lot!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">

body {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 100%;
color: #666;
}
h1 {
font-family: Tahoma, Geneva, sans-serif;
font-size: 1.2em;
color: #600;
}
p {
font-size: 0.9em;
font-family: "Courier New", Courier, monospace;
}

#bottom {
font-family: Tahoma, Geneva, sans-serif;
color: #FFF;
background-color: #999;
}
-->
</style>
</head>
<body>

<h1>This is an H1 outside of the div bottom tag. Therefore, the h1 style should apply.</h1>

This is just text without a paragraph and outside of the div tag. Therefore, the body style should apply.
<p>This is a paragraph outside of the div bottom tag. Therefore the p style should apply.</p>

<div id="bottom">
<h1>This is an H1 inside the div bottom tag. Therefore the div bottom style should apply.
</h1>

This is just text without a paragraph but in the div tag. Therefore, the div bottom style should apply.

<p>This is a paragraph inside the div bottom tag. Therefore, the div bottom style should apply. Apparently, only the p tag inside the div tag is overwritten by the div tag. I thought the div tag is always more specific than a p h1 or body tag. </p>
</div>

</body>
</html>

effpeetee

06-25-2010, 08:43 AM

Does this help at all. (http://htmldog.com/guides/cssadvanced/specificity/)

I am not too sure myself about specificity. I've have not used code with much complexity.
I don't often nest.

Frank

This is a useful source of info. (http://exitfegs.co.uk/Sources.html)

Use the search facility. (Single words work best.)

abduraooft

06-25-2010, 09:19 AM

Therefore, the style applied to an id selector should overwrite the style of a tag selector. That should be correct if the id attribute is applied on the same tag. Here, in your case the tag selector is more specific than the id selector of its parent. Now, if you need to alter the h1 within that div, you may use a more specific selector like #bottom h1{color:#FFF;}

speakerman

06-25-2010, 10:07 AM

Thanks a lot for the answers but I still didn't get it completely. I know now how to change it but I don't understand why.

In my understanding, the id attributes are applied to the h1 tag because the h1 tag is inside the div container with the id bottom.

And why is here the tag selector more specific than the id selector? The h1 style applies to every h1 tag on every page but the id selector style only to that div tag with the id bottom. So the latter is more specific in my opinion ...

Sorry I'm maybe a bit slow today ...

abduraooft

06-25-2010, 10:46 AM

And why is here the tag selector more specific than the id selector? The h1 style applies to every h1 tag on every page but the id selector style only to that div tag with the id bottom. So the latter is more specific in my opinion ... It's like, if there's an id selector and a tag selector, "targeting the same element", then the id selector will get high priority. Check the following example.
h1{
color:blue;
}
#header{
color:red;
}
span{
color:green;
}
<h1>Heading 1</h1>
<h1 id="header">Heading 1 <span>Span</span></h1>

speakerman

06-26-2010, 12:16 PM

Thanks! I got it now.