How to select the previous sibling of an element

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

MDN Compat Data (source)

Browser support info for :has()

105	105	105	103*	103	15.4	15.4	20.0	105

* Please check MDN for more details.

I always thought :has() is 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 { /* ... */ }

If you want to learn more, head over to Jim's blog. It's a great one!