Saswat Saswat - 1 month ago 5x
CSS Question

How to write css for a div under a div which specific id which is itself under a div with specific class?

I have some div structure:

<div class="row-fluid Editor-container">
<div id="menuBarDiv" class="row-fluid">
<div class="btn-group">
<div class="btn-group" title="Fonts" style="cursor: pointer;"></div>
<div class="btn-group" title="Paragraph Format" style="cursor: pointer;"></div>
<div class="btn-group" title="Font Size" style="cursor: pointer;"></div>

Now I want to write a CSS where:-

div of class="btn-group"
div id="menuBarDiv"
div class="Editor-container"
would have css like this:-

.btn-group::before, .btn-group::after {
content: "";
display: inline;

How can I do that?


So you want to style .btn-group in #menuBarDiv in .Editor-container?

You would do that by .Editor-container > #menuBarDiv > .btn-group::before or .Editor-container #menuBarDiv .btn-group::before.

The difference: My first code must follow the exact hierarchy, you defined there. The hierarchy in the second code can differ in some way, there can be another id or class in between #menuBarDiv and .btn-group for example, it doesn't matter if they are direct children or parents.

More information about the topic:

Notice: As kukkuz already pointed out, the id is already specific, make sure you really have to use the child selectors.