Add margin between all direct children of a <div> except the last one

Issue

I'm looking to add some space between blog elements in Gutenberg. I've tried with:

.single .container > * :not(:last-child) {
    margin-bottom: 24px;
}

However, this applies on elements that aren't direct children of the container. For example the <div class="wp-container-1 wp-block-column" ...>

<div class="container">

<p>Lorem ipsum dolor sit amet</p>

<h2>Title H2</h2>
<h3>Title H3</h3>
<h4>Title H4</h4>

<blockquote class="wp-block-quote" id="output"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><cite><strong>Firstname Lastname</strong> – Job at Company</cite></blockquote>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>

<div class="wp-container-3 wp-block-columns">
<div class="wp-container-1 wp-block-column" style="flex-basis:20%">
<figure ... ></figure>
</div>
<div class="wp-container-2 wp-block-column" style="flex-basis:80%">
<blockquote class="wp-block-quote is-style-plain" id="output"><p>Use the “plain” style for blockquotes.</p><cite><strong>Firstname Lastname</strong> – Job at Company</cite></blockquote>
</div>
</div>

</div>

Solution

Is what you're looking for:

.single .container > *:not(:last-child) {
    margin-bottom: 24px;
}

The issue is that you had:

.single .container > * :not(:last-child) {}
                      ^
                  This space

Which is saying:

Apply a margin-bottom to all elements that are descendants of any element, so long as they're not the last-child, when compared to their siblings, that are themselves the direct child of .container elements, which are themselves descendants of .single elements.

You want to apply the filter to all of the direct children, not just any descendant of any element (the wildcard selector [*]).

If that makes sense?

.container > *:not(:last-child) {
  background-color: red;
  margin-bottom: 24px;
}

<div class="container">

  <p>Lorem ipsum dolor sit amet</p>

  <h2>Title H2</h2>
  <h3>Title H3</h3>
  <h4>Title H4</h4>

  <blockquote class="wp-block-quote" id="output"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
    eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
    ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
    officia deserunt mollit anim id est laborum.</p>
    <cite><strong>Firstname Lastname</strong> – Job at Company</cite>
  </blockquote>

  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
    magna aliqua.</p>

  <div class="wp-container-3 wp-block-columns">
    THIS IS WHERE THE CSS IS NOT APPLIED
    <div class="wp-container-1 wp-block-column" style="flex-basis:20%">
      <figure ...></figure>
    </div>
    <div class="wp-container-2 wp-block-column" style="flex-basis:80%">
      <blockquote class="wp-block-quote is-style-plain" id="output">
        <p>Use the “plain” style for blockquotes.</p>
        <cite><strong>Firstname Lastname</strong> – Job at Company</cite>     
      </blockquote>
    </div>
  </div>
</div>

Shows an example that's pretty clear.

Answered By - Jack_Hu