<main class="parent">
  
  <!-- .sister immediately after .brother -->
  <div class="brother"><code>.brother</code></div>
  <div class="sister"><code>.sister</code></div>

  <!-- .sister immediately after .brother -->
  <div class="brother"><code>.brother</code></div>
  <div class="sister"><code>.sister</code></div>
  <!-- .sister immediately after .sister -->
  <div class="sister"><code>.sister</code></div>

  <div class="brother"><code>.brother</code></div>
  <!-- .cousin immediately after .brother -->
  <div class="cousin">
    <!-- .sister contained in a .cousin -->
    <code>.cousin</code>
    <div class="sister"><code>.sister</code></div>
  </div>
</main>
/* Select all div elements */
div {
  background: hsl(0 0% 0% / .5);
  border: 1px solid white;
  color: white;
  place-items: center;
  padding-block: 1rem;
  padding-inline: 1.5rem;
  position: relative;
  width: 100%;
}

/* Selects all .brother elements */
.brother {
  background-color: hsl(25 100% 50%);
}

@layer base {
  html {
    background-color: #262626;
    background-position: top center;
    background-repeat: no-repeat;
    background-image:
      radial-gradient(50% 50% at top center, rgb(0 0 0 / 0.66), #262626),
      linear-gradient(180deg, #fff, #262626);
    background-size: 120% 2000px, 100% 2000px;
  }
  
  body {
    display: grid;
    font-size: 1.5rem;
    gap: 1.5rem;
    font-family: Merriweather, serif;
    padding: 1ch;
  }
  
  main {
    display: grid;
    gap: 1rem;
  }
  
  div > div {
    inset-block-start: 1rem;
    inset-inline-start 100vw;
    position: absolute;
  }
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.