Alex Rivera | Logout

CSS Style Nesting - Proper Form?

Asked 2009-06-07T16:39:24.603
19

I am having a problem trying to find any specific details on how to properly write CSS rules in a stylesheet where the class or ID is nested within many other IDs and styles, e.g.

.mainbody #container #header #toprightsearch .searchbox {}

So here we have a searchbox class within a toprightsearch ID, in a header ID, in a container ID, in a mainbody class.

But it appears to work properly if I omit some of the IDs.

What is the correct way of listing these?
If I include all of the parents does it make it more specific? Can it error on different browsers if I don't include all?

And any additional information on this topic would be appreciated.

Thanks

css nested
Edit
Report

1 Answer

4

Id's are specific to the page. So you'd just use 

#toprightsearch {
 stylename: stylevalue;
}

If your looking for nested classes then the correct format is 

.header .textBoxes {
  stylename: stylevalue;
}

If you know the exact child of a parent then you use the > sign. So if your document was like this: 

<div class="header">
    <div class="menu">
         <input type="text" class="textBox" />
    </div>
</div>

You can use this:

 .header > .menu > .textBox {somestyle:somevalue;}

This means only items with a .textBox class directly inside of a .menu class item which is itself directly below an element with a class of .header.

answered 2012-08-20T20:48:25.180

Your Answer