<div class="wrapper">
    <article class="flow">
      <h1>Next sibling selector</h1>
      <figure class="callout">
          The <strong>next sibling selector</strong> allows us to only add margin to
          siblings that follow each other.
      <div class="top box">
        <p>I have no margin because I am the first child.</p>
          I have <code>margin-top</code> because I am a <strong>next sibling</strong>.
        <p>I am also a <strong>next sibling</strong>, so also get margin top.</p>
.top * + * {
  margin-top: 1.5em;

/* Presentation styles */
.top p {
  border: 1px solid var(--color-primary);
  background: var(--color-light);
  padding: 1em;

/* Presentational styles */
.top > * + * {
  position: relative;

.top > * + *::before {
  content: "";
  width: 100%;
  height: 1.5em;
  background: #ff807b;
  position: absolute;
  bottom: 100%;
  left: 0;
  outline: 1px solid #9d0600;

External CSS

  1. https://codepen.io/web-dot-dev/pen/abpoXGZ.css

External JavaScript

This Pen doesn't use any external JavaScript resources.