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

Improve this question

6 Answers 6

Reset to default
35 
.searchbox {}

Styles anything with .searchbox

.mainbody .searchbox{}

Styles any .searchbox that descends from any .mainbody, direct child, grandchild, quadruple great grandchild, doesn't matter.

#toprightsearch > .searchbox {}

Styles only .searchboxes that are direct children of #toprightsearch

#container * .searchbox {}

Styles .searchbox's that are grandchild or later of #container.

Here's a good document on the topic: w3C selectors

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

7

If you include more parents, it does increase selector specificity. You shouldn't have cross-browser problems omitting parents.

There is no correct number of parents to list; it depends on what you require for your markup. As you're seeing, selector1 selector2 means a selector2 at any level inside a selector1, and you can tune that for whatever behavior you need.

In your example, you should list .mainbody #container #header #toprightsearch .searchbox if what you mean is for the style to only apply to .searchboxes that are inside that entire hierarchy. If contrariwise you want .searchboxes that exist other under conditions to get the same style, you should be less restrictive in the hierarchy. It's only about what you're trying to accomplish.

Re comment: IDs produce more specificity, so omitting them reduces your rule's specificity more.

Improve this answer

1 Comment

Ok - and is there any difference in omitting IDs vs Classes?
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.

Improve this answer

Comments

2

From the W3 Selectors Documentation:

Descendant selectors express such a relationship in a pattern. A descendant selector is made up of two or more selectors separated by white space. A descendant selector of the form "A B" matches when an element B is an arbitrary descendant of some ancestor element A.

So in short, no you do not have to include all of the parent elements, and should not cause any cross-browser problems. However, with this selector:

.mainbody .searchbox {}

The styles defined will apply to any element with a class of searchbox whether it descends directly or indirectly from an element with class mainbody.

With your proposed selector, however:

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

The styles defined are more specific, and so only elements that descend from an element with class mainbody, then the elements with IDs of #container, #header, #toprightsearch in that order and that have a class name searchbox will have the defined styles applied.

Improve this answer

Comments

1

Theoretically, an ID should only be used for one specific item on a page. So you should only have one item with an ID of toprightsearch so, for your CSS to work you only need to indicate:

#toprightsearch .searchbox {}

because there is only one item on your page with an ID of toprightsearch, All the other selectors are unnecessary.

If you have two items on your page with an ID of toprightsearch then that is bad coding practice.

Improve this answer

Comments

0

The code below does what it says (at least in Firefox). it colors the input red

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<style type="text/css">
.mainbody #container #header #toprightsearch .searchbox {
    background-color:red;
}
</style>
</head>

<body class="mainbody">

<div id="container">
    <div id="header">
        <div id="toprightsearch">
            <input type="text" class="searchbox" />
        </div>
    </div>

</div>
</body>
</html>

I think you should see if there went anything wrong in spelling the ID's and classes.

Improve this answer

3 Comments

thanks, but I'm not having a problem making it work. I just noticed that it works sometimes if I omit parent ids and classes. So I am looking for the correct way to list rules.
Whoever downvoted this has issues. This was a very good answer to the question it sounded like razass was asking.
The question was why you could omit some of the combinators and still get the same result--not a "this is busted" question but a "why does this still work?" question. It was probably down voted because it appears that jao didn't read the question carefully (I didn't down vote this however)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.