Saswat Saswat - 3 months ago 6
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>
</div>
<div>
</div>


Now I want to write a CSS where:-

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

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


How can I do that?

Answer

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: https://css-tricks.com/child-and-sibling-selectors/

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