How to select the previous sibling of an element (#snippet)

This content originally appeared on Stefan Judis Web Development and was authored by Stefan Judis

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.

Browser support info for `:has()`

Nope	Non	Nope	Nö	Nein	15.4	Nope	Non	Nö

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!

Reply to Stefan

This content originally appeared on Stefan Judis Web Development and was authored by Stefan Judis

Print Share Comment Cite Upload Translate Updates

APA

Stefan Judis | Sciencx (2022-07-15T22:00:00+00:00) How to select the previous sibling of an element (#snippet). Retrieved from https://www.scien.cx/2022/07/15/how-to-select-the-previous-sibling-of-an-element-snippet/

MLA

" » How to select the previous sibling of an element (#snippet)." Stefan Judis | Sciencx - Friday July 15, 2022, https://www.scien.cx/2022/07/15/how-to-select-the-previous-sibling-of-an-element-snippet/

HARVARD

Stefan Judis | Sciencx Friday July 15, 2022 » How to select the previous sibling of an element (#snippet)., viewed ,<https://www.scien.cx/2022/07/15/how-to-select-the-previous-sibling-of-an-element-snippet/>

VANCOUVER

Stefan Judis | Sciencx - » How to select the previous sibling of an element (#snippet). [Internet]. [Accessed ]. Available from: https://www.scien.cx/2022/07/15/how-to-select-the-previous-sibling-of-an-element-snippet/

CHICAGO

" » How to select the previous sibling of an element (#snippet)." Stefan Judis | Sciencx - Accessed . https://www.scien.cx/2022/07/15/how-to-select-the-previous-sibling-of-an-element-snippet/

IEEE

" » How to select the previous sibling of an element (#snippet)." Stefan Judis | Sciencx [Online]. Available: https://www.scien.cx/2022/07/15/how-to-select-the-previous-sibling-of-an-element-snippet/. [Accessed: ]

rf:citation

» How to select the previous sibling of an element (#snippet) | Stefan Judis | Sciencx | https://www.scien.cx/2022/07/15/how-to-select-the-previous-sibling-of-an-element-snippet/ |

Please log in to upload a file.

There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts