Why do people use multiple ID selectors in CSS? - html

Question

Why do people do this in CSS:
#section #content h1
{
margin:0;
}
When they can just do:
#content h1
{
margin:0;
}
for code like this:
<div id="section">
<div id="content">
</div>
</div>
and get the same results (at least in IE7 - my target browser, unfortunately). Is it just for specificity in the code? Code clarity to declare what you are referring to?

Answer 1

CSS files are generally designed to be reusable so that the same CSS can be used all over the website and can be applied to all pages in the application.
Targeting a very Specific node can be useful to prevent any surprising behavior.
Suppose you had this code as you said,
#content h1
{
margin:0;
}
<div id="section">
<div id="content">
</div>
</div>
Someone came after you and created another HTML page using the same CSS and the structure was this
<div id="content">
</div>
and you desire a different styling for the H1 on this page.
You can argue that even with this CSS
#section #content h1
{
margin:0;
}
if the new page consisted of the same structure,
<div id="section">
<div id="content">
</div>
</div>
well in that case it is easier to debug, in this example the structure is quite simple, but real life CSS tend to be complex.

Answer 2

If you (or anybody else) is doing it, you shouldn't be. You're just trying to hold together a poorly developed CSS structure.
Try your hardest to stick to this rule: IDs are for JavaScript, classes are for CSS.

Answer 3

You should never need multiple IDs in a selector since IDs must be globally unique in the document. This means your #section #content h1 is overkill since it includes 2 IDs.
Other types of selectors (classes, tag names, etc) are not unique, so you might need to string a few together to get the element you want. For example, #section .content p would be perfectly reasonable in many contexts.

Answer 4

You might not want all #content h1 to look the same.
In that case #content h1 might have an ancestor ID/Class that you would want to latch onto so you can change the style of the h1 for those instances.
For example:
#content h1 { /* style 1 */ }
#about #content h1,
#contact-us #content h1,
.products #content h1 { /* style 2 */ }

Answer 5

The term you are looking for is "Specificity" best example ive seen to describe this is using a points based system.

Answer 6

You use multiple selectors so that you don't select sections that you don't want.
For example, taking your use case, we would have to expand it from a section and content div, to something slightly larger.
<div class="wrapper">
<div class="header">
<div class="content">
</div>
</div>
<div class="section>
<div class="content">
</div>
</div>
</div>
Now, without adding the extra specificity, you will grab all H1 tags in every content section of the page, but you probably don't want to do that.
It's not a problem to be non-specific in small files, but when you begin to reach into the hundreds of possible css interactions being very specific about what you are doing in the css can save you major headaches.