<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>

<ul>
  <li>Lorem</li>
  <li data-range="start">Veritatis</li>
  <li>Eos</li>
  <li>Debitis</li>
  <li>Autem</li>
  <li data-range="end">Atque</li>
  <li>Eius</li>
  <li>Lorem</li>
  <li>Nostrum</li>
  <li data-range="start">Veritatis</li>
  <li data-range="end">Atque</li>
  <li>Eos</li>
  <li data-range="start">Veritatis</li>
  <li>Debitis</li>
  <li>Autem</li>
  <li data-range="end">Atque</li>
  <li>Eos</li>
  <li>Debitis</li>
  <li>Autem</li>
</ul>

/* All between a range */
// prettier-ignore
[data-range="start"] ~ :has(~ [data-range="end"]):not([data-range]):not([data-range="end"] ~ :has(~ [data-range="start"])) {
  background-color: hsl(0 0% 85%);
}

/* Start and end elements of range */
[data-range] {
  background-color: hsl(0 0% 95%);
}

/* Starting element of range */
[data-range="start"] {
  border-radius: 0.5rem 0.5rem 0 0;
  box-shadow: 0 -4px 0 -1px hsl(0 0% 0% / 45%);
  list-style-type: "➡️ ";
}

/* Ending element of range */
[data-range="end"] {
  border-radius: 0 0 0.5rem 0.5rem;
  box-shadow: 0 4px 0 -1px hsl(0 0% 0% / 35%);
  list-style-type: "➡️ ";
}

/* First element inside of range */
[data-range="start"] + :has(~ [data-range="end"]):not([data-range]) {
  list-style-type: "🟢 ";
}

/* Last element inside of range */
[data-range="start"] ~ :has(+ [data-range="end"]):not([data-range]) {
  list-style-type: "🔴 ";
}

ul {
  padding: 0;
  background-color: white;
  font-size: 1.25rem;
  border-radius: 0.25rem;
  list-style: none;
  list-style-position: inside;
  margin-inline: auto;
}

li {
  padding: 0.75rem 2rem 0.75rem 1rem;
}

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

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

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

:root {
  --body-padding: 2rem;
}