Sibling Scopes in CSS, thanks to :has() and ~

~

# Creating a Sibling Scope

Say you have markup like this:

<ul>
  <li>outside</li>
  <li class="from">from</li>
  <li>in-between</li>
  <li>in-between</li>
  <li>in-between</li>
  <li>in-between</li>
  <li class="to">to</li>
  <li>outside</li>
</ul>

If you want to select all elements between that .from and .to element, you can do so using this selector powered by the almighty :has() selector:

.from ~ :has(~ .to) {
  outline: 1px solid red;
}

It works as follows:

• .from ~ * will select all elements that are preceded by .from.
• :has(~ .to) will select all elements that are followed by a .to.
• By combining both, you can clamp the selection and create a scope between the .from and .to siblings.

If you want to included the boundaries, create a selector list:

.from,
.from ~ :has(~ .to),
.to {
	outline: 1px solid red;
}

~

# Technical Demo

See the Pen Sibling Scopes by Bramus (@bramus) on CodePen.

~

# Limitations

As shown in the technical demo, the .from ~ :has(~ .to) is greedy. If you have two adjacent sets of boundaries that are also siblings from each other, the selector will select everything in between the first .from up to the last .to.

<ul>
  <li>outside</li>
  <li class="from">from</li>
  <li>in-between</li>
  <li>in-between</li>
  <li class="to">to</li>
  <li class="from">from</li>
  <li>in-between</li>
  <li>in-between</li>
  <li class="to">to</li>
  <li>outside</li>
</ul>

Depending on the use-case, this might or might not be considered a limitation.

Furthermore, this selector is a “heavy” one to match, so it could cause performance issues when used abundantly or on a large DOM. Use with caution.

~

# Browser Support

These selectors are supported by all browsers that have :has() support. At the time of writing this does not include Firefox.

.from ~ :not(.to):not(.to ~ *) {
    outline: 1px solid red;
}

~

# Practical Application

My colleague Jhey built a date picker that highlights the days in between your preferred start and end day.

Because they need to select elements across <tr> elements, the code is pretty wild and a bit more difficult to grasp. Basically it targets all cells between the one that has a :checked input and the cell your are currently hovering.

~

# Spread the word

To help spread the contents of this post, feel free to retweet its announcement tweet:

Sibling Scopes in CSS, thanks to :has()

🔗 https://t.co/SVTUAzvxgp

🏷 #css #selectors pic.twitter.com/qdtOuwgLzm

— Bram.us (@bramusblog) January 12, 2023

~