[Jeff-in-Denver]

I have a question regarding CSS.

Quick background: I have no formal training. Self taught via trial and error. I consider myself at intermediate level.

Question: Can someone explain to me the difference between these two:

div#nav {
width: 25.5%;
padding: 10px;
margin-top: 1px;
height: 100%;
float: left;
}

#nav {
width: 25.5%;
padding: 10px;
margin-top: 1px;
height: 100%;
float: left;
}

The page works when I use the "DIV#" in the style, but not when I just use the "#" by itself. My page now works. I am curious as to know why...what changes by putting "DIV" in there?

[pgo]

Specificity. It's the "cascading" part of "CSS". Assigning property values, Cascading, and Inheritance

div#nav has a slightly higher specificity than #nav.

[Jeff-in-Denver]

Thanks. Not sure why it changed anything...the ID was being applied only to DIVs anyway.

Is there a reason you would specify the syle to DIVs as opposed to just leaving it generic?

[pgo]

Well, say you want all elements that have #something to be green.

#something { color: green; }

But on some pages, your "#something" is a <p>. You want those to be red.

p#something { color: red; }

Now, all "#something" on any given page is going to be green - unless that "#something" is a <p>.

Granted, this isn't a terribly common occurance.

[Jeff-in-Denver]

Ahhh...so it is an exception thing...there is no real reason to use "p#something" unless you already have a "#something" defined. Right?

That does make sense. It doesnt explain why my problem was fixed, but it is still good to know I can do that. I never knew that before.

[pgo]

Well, I guess it could also serve as a reminder as to what kind of element is getting the ID.