<aside>
  <p>🚨 Sorry, your browser doesn't support <code>:has()</code> - view this demo in <a href="https://caniuse.com/css-has" target="_blank">a supported browser</a>.</p>
</aside>

<article>
  <h1>Lorem ipsum dolor sit amet.</h1>
  <p>Quaerat ea corrupti, saepe blanditiis voluptatem ad, velit earum enim ipsum, laborum facere.</p>
  <h2>Lorem ipsum dolor sit amet consectetur.</h2>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem asperiores maxime inventore est!</p>
  <p>Expedita consequuntur facere quisquam optio aliquam reiciendis accusantium officiis. Eos, ab. Nemo, numquam.</p>
  <hr>
  <p>Laboriosam, expedita. Pariatur assumenda magni quibusdam beatae cupiditate a ea praesentium officiis quam.</p>
  <p>Quae, voluptatibus quam molestias assumenda earum corporis quis, dolorem aperiam voluptatum minus esse!</p>
  <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit.</p>
  <hr>
  <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eius voluptate consectetur voluptatem odio?</p>
  <h2>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</h2>
  <p>Inventore ducimus asperiores molestiae accusamus. Est aspernatur eligendi dolorum illo fuga eaque itaque.</p>
  <p>Lorem ipsum dolor sit amet consectetur.</p>
  <p>Vero, eligendi possimus numquam aut fugiat, quos molestiae, saepe ducimus optio rem non!</p>
  <h2>Lorem, ipsum dolor.</h2>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Id commodi error excepturi.</p>
  <p>Libero laboriosam harum mollitia tempora sit qui architecto blanditiis!</p>
  <h2>Lorem ipsum dolor sit.</h2>
  <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit.</p>
  <p>Molestias dolore blanditiis corporis quidem illum, magni magnam.</p>
</article>

/* First and last within a range (of h2) */
article h2 + :has(~ h2),
article h2 ~ :has(+ h2) {
  display: list-item;
  list-style-position: inside;
}

/* First within a range (of h2) */
article h2 + :has(~ h2) {
  list-style-type: "🟢 ";
}

/* Last within a range (of h2) */
article h2 ~ :has(+ h2) {
  list-style-type: "🔴 ";
}

/* All between a single range (of hr) */
article hr ~ :has(~ hr) {
  background-attachment: fixed;
  background-image: linear-gradient(
      to right,
      hsl(0% 100% 100% / 80%) 65%,
      hsl(0% 100% 100% / 40%)
    ),
    repeating-linear-gradient(35deg, #fc31fe 0 2px, white 2px 6px);
}

h1 {
  font-size: clamp(1.45rem, 1rem + 5vw, 3rem);
}

h2 {
  font-size: clamp(1.25rem, 1rem + 4vw, 2.25rem);
}

article {
  width: min(95vw, 60ch);
  background-color: white;

  + article {
    margin-top: 5vh;
  }
}

article :not(hr) {
  padding: 0.75em 1rem;
}

article :where(h1, h2, h3) {
  line-height: 1.1;
}

article :not(h1, h2, h3) {
  line-height: 1.5;
}

article :is(ol, ul) {
  padding-inline-start: 2rem;
  margin-inline-start: 1rem;
}

/* :has() support alert */
aside {
  max-width: 30ch;
  padding: 1rem;
  background-color: palegoldenrod;
  border-radius: 0.5rem;
  margin-inline: auto;
  margin-block: 1rem;
  line-height: 1.3;

  code {
    font-size: 1.25em;
    color: firebrick;
  }
}

@supports selector(:has(+ *)) {
  aside {
    display: none;
  }
}