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


Tags: html,css

Problem :

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?



Solution :

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.


    CSS Howto..

    How to manage clashing third party CSS

    How do I apply properties to a previous sibling on hover?

    Using CSS, how do I change the font color of parent
  • tag if child
  • tag is hovered over
  • How to prioritize a CSS class?

    How to handle right-to-left text-input fields the right way?

    How can I fill with the color and make it square using CSS?

    How to adjust the size of the input component?

    How to Make DD Wrap under DT When DD Content has No Spaces

    How to Show the Related Content in another Div when an Image Clicked

    How can I remove a parent with a certain child inside of it (media queries)

    How to set CSS hover on input

    jQuery - jCarouselLite - Images are not showing up

    how to animate “simple jquery filtering” by using css only

    WebGL: How to make an interactive div (like text input) be drawn on some web gl 3d object and still be interactive?

    How to dynamically change CSS using JS

    how to add embedded ruby in style tag

    How to extract r, g, b, a values from CSS color?

    How to stop CSS/HTML navigation menu wrapping at different resolutions?

    How can I simply add a css file to change the background color for my shiny app

    How to make Text inside Div Unselectable/uncopyable? [closed]

    How to include LESS files in web page using Web Essentials?

    How to darken a CSS background image?

    How to force margins to be ready from js before document ready

    How to fix this css to conform to all browsers?

    Intellij IDEA 11: how can I compile .css from .less?

    Show/Hide Html TR/TD

    css button with arrow… how to move arrow

    How to layout html CSS in this way? [closed]

    How to change a Pseudo-class style through JavaScript?

    how to have custom css overrule bootstrap