Why put classes inside of ID ? For example:

 

{#Loot .paper}
 

 

If you wanted to style a child element? E.g.:

 

<div id="example">
<a class="style_me">Link</a>
</div>

You would use:

 

#example .style_me{/* etc. */}

Or have I misinterpreted the question?

I use this method for making child differences. So if .paper had padding, shadow and a white background but if I wanted the .paper inside the #Loot element to have a red background I would only need to set the #Loot .paper class background to red. There are other uses too.

 

.paper { padding: 5px; background: #fff; box-shadow: 10px 10px 5px #888888; }
#Loot .paper { background: red; }

EDIT: Couldn't add an example on my phone.

A good example i can think of is changing font size for people with good/bad eyesight, you can have a list of IDs of elements that you want top change the font size for and then just use JS to remove or add the choosen class

 

 

<style>
   .size-small{ font-size:12px; }
   .size-medium{ font-size:16px; }
   .size-large{ font-size:20px; }
</style>
<div id="header" class="size-small"></div>
<div id="main" class="size-small"></div>

It's a good way to reuse a lot of the CSS you have already written. Let's say I want to adjust the width of a widget on the homepage, but keep the styling that I use on all pages.

<div id="home-sidebar" class="widget"></div>

#home-sidebar.widget {
width: 30%;
}

.widget {
background: pink;
}

http://jsfiddle.net/5bCtL/

Edited February 28, 201412 yr by Jack

Nice examples, thanks for the help !

You should try to avoid using too many ID's in your css. The reason being that an ID has a very high specificity and will overwrite any rules that might have been inherited from a class.

 

Ideally you want to keep your css dry, as in try to avoid repeating the same properties over and over, this is where classes are useful for grouping elements together that share styling characteristics by sharing the same classname. This is not possible with IDs and on a big site dry css is a hell of a lot easier to maintain not to mention faster too.

 

I do occasionally find myself using ID's where I know something will be unique, but to be honest I think that is just down to laziness more than anything as the ID could easily be substituted for a class.

 

And to answer your question it's to target any descendant of that id that has a matching classname.

 

 

 

You would use the following code to target only a direct child of the id

#IDname > .classname {

}

and

#IDname + .siblingname {

}

To target a sibling of the id.

 

There's a load of good tutorials if you search for css selectors, you don't need to remember them all but just be aware that they exist. I do find myself using them but very rarely.

Edited March 4, 201412 yr by rbrtsmith