How do I select a <div> tag within another <div> tag?

Question

I have the following:

<div id="view">
    <div id="navbar">
        Placeholder Text
    </div>

</div>

I would like to style the text in 'navbar'. However, there is another div further up in the document called 'navbar' in the stylesheet?

I thought it was something like:

#view#navbar {
font-style: normal;
...etc
}

But that didn't work.

Thoughts?

Answer 1

#view #navbar {
    font-style: normal;
    ...etc
}

This is what you want. The same applies for classes. You can read all about CSS selectors here.

Answer 2

Put a space in between:

#view #navbar {

If you specify two properties together without spaces, you select elements that have both attributes - which is impossible for an ID, but possible for, say, a class:

<div id="view" class="topmost">

div#view.topmost <-- Will address that element

Answer 3

As it is an id, it must be unique for the document. Thus, you can refer to it by itself:

#navbar {
  font-style: normal;
  ...etc
}

Answer 4

First of all, if there is another #navbar in the document it should be a class instead of an id, you shouldn't have 2 ids with the same name.

So it would be:

<div id="view">
    <div class="navbar">
        Placeholder Text
    </div>

</div>

Then for styling it you would do:

#view .navbar {
font-style: normal;
...etc
}

Answer 5

ID are uniques, so you can do :

#navbar {
  ...
}

But, the best it's to do with classes to avoid collisions :

<div class="view">
    <div class="navbar">
        Placeholder Text
    </div>
</div>

And do ;

.view .navbar {
  ...
}