How to select the previous sibling of an element

Jim Nielsen blogged about a mind-boggling feature of the new :has() pseudo-class. The pseudo-class isn't cross-browser supported yet, but this CSS addition unlocks countless use cases that Frontend engineers have been dreaming of for years.

Here's the current browser support according to MDN.

MDN Compat Data (source)

Browser support info for :has()

105	105	105	121	121	15.4	15.4	20.0	105

When I heard first about :has(), I thought it's only the long-awaited "parent selector", but Jim shared that it's the "previous sibling selector", too! 🤯

/* 
  Select every <a> element that's a child of 
  a <p> element that directly precedes an <hr> element.
*/
p:has(+ hr) a { /* ... */ }

With :has() entering the web platform, we can select elements in all directions — we wanted the "parent selector" but will soon have a selector to match the entire family.

Styling the next and previous siblings becomes a nifty one liner. Let's look at a few examples!

Before getting into the new and fancy things, let's recap how to select next (or following) DOM elements.

To select an element's next sibling, use the adjacent sibling selector (+). The selector will match the element that immediately follows another element.

/* Select the center element's next sibling */
.center + * {
  background: var(--red);
}

Similarly, the general sibling selector (~) allows you to select all following elements.

/* Select all the center element's next siblings */
.center ~ * {
  background: var(--red);
}

Are you ready for the :has() selector beauty?

We can now invert these selectors with :has() and match elements in the other direction to select previous siblings. 🤯

Use :has() with the adjacent sibling selector (+) to select the immediately previous element...

/* Select the center element's previous siblings */
*:has(+ .center) {
  background: var(--red);
}

... or the general sibling selector (~) to match all previous siblings.

/* Select all the center element's previous siblings */
*:has(~ .center) {
  background: var(--red);
}

:has() is a pretty big deal in CSS land and I can't wait until it finally lands in all browsers, so we can match elements in all directions. Up and down! And left and right — the CSS future's bright!