Question about ID and regular CSS classes...

I’m currently redoing the css classes for my website, using ID to group together frequently used individual CSS classes.

Let’s say I have...



#gameinfo’s DIV ID would be inside the DIV ID for #content. Would #gameinfo’s .heading override #content’s, or would it inherit the CSS, and I would need to use a different name?

If #gameinfo is inside #content, then by definition anything in #gameinfo with a class of .heading is also inside #content, so yes it inherits those characteristics. You can override them any number of ways, but if the differences are substantial then personally I would just use another class. You can avoid the whole issue just by making the second class .subheading (or whatever).

#content .heading
#content #gameinfo .heading

would probably be the safest, as well as making it easier to see exactly what you’re working with.

Thanks for the expalanations.

You may want to read How specificity works (sitepoint.com) in CSS.

Quote from: sottwell at Apr 26, 2008, 11:53 AM

#content .heading
#content #gameinfo .heading

would probably be the safest, as well as making it easier to see exactly what you’re working with.

Not only is it safer, but I have read articles stating that it’s also parsed faster by browsers...

Quote from: davidm at Apr 28, 2008, 11:10 AM

Quote from: sottwell at Apr 26, 2008, 11:53 AM

#content .heading
#content #gameinfo .heading

would probably be the safest, as well as making it easier to see exactly what you’re working with.

Not only is it safer, but I have read articles stating that it’s also parsed faster by browsers...

Just to check, #content #gameinfo .heading means that the CSS only applies if the div/whatever is inside both of those DIV ID tags, right?

Yes. But IDs are not exclusive to DIVs, any element could have an ID.

Right. What that’s saying is "the element with the class of "heading" that is inside of the element with the ID of gameinfo which is inside of the element with the ID of content". So if you had #sidebar #gameinfo .heading, it would not be affected by the #content #gameinfo .heading style (unless the #sidebar container happens to be inside of the #content container...)

What you are dealing with here is "specificity"

The more specific a selector, the more preference it receives when rendering a page. Actually, there are rules for calculating an item’s specificity. Basically, numeric values are assigned to certain CSS selectors. Every id selector has a value of 100; class selectors have a value of 10 and every HTML selector is assigned a value of 1. You add up these values for CSS rules and the higher number wins. The following calculations are made on the previous example:

* BODY H1 consists of two HTML selectors, so it is 1 + 1 = 2.
* H1 consists of one HTML selector, so the result is 1.
* In every instance, 2 > 1, so H1 elements (within BODY elements) are red.

http://articles.techrepublic.com.com/5100-3513-6164216.html
http://www.w3.org/TR/REC-CSS2/cascade.html

I get it now.

(I’m new to ID’s in CSS, so it was kinda confusing at first. You guys did a good job explaining it.)