Give styles to two divs within a global div CSS

0

I have a div A that contains div B and div C .

<div id="A">
    <div id="B">
       ...
    </div>
    <div id="C">
       ...
    </div>
</div>

I want div B to have a margin-top separation: 2em; regarding div C.

The following code does not work for me:

#B + #C{
    margin-top: 2em;
}
    
asked by omaza1990 09.01.2018 в 03:49
source

2 answers

3

You can use the following rule of universal selectors > * , automatically add the margin to the next adjacent element or to everything that is included within div that is to say all the elements that are contained within another.

#A > * {
  margin-top: 2em;
}

or

#B > * {
  margin-top: 2em;
}

You can also apply that rule you are using but separating them with commas:

#B, #C {
  margin-top: 2em;
}
    
answered by 09.01.2018 / 04:00
source
0

If the style is specific for certain identifiers, why do not you write the rule for the identifier 'C', that is:

#C {
    margin-top: 2em;
}

But of course, you should avoid writing style rules for the identifiers and getting used to doing it in classes, for example:

.container-box > div {  
  background-color: lightblue;
}

.container-box > div:nth-of-type(n+2) {
  margin-top: 2em;
}
<div class="container-box">
  <div>
    DIV B
  </div>
  <div>  
    DIV C
  </div>
  <div>  
    DIV D
  </div>
</div>
    
answered by 09.01.2018 в 04:09