:has()

Creator

Creator

Seonglae Cho

Created

Created

2021 Mar 26 7:33

Editor

Editor

Seonglae Cho

Edited

Edited

2023 Oct 23 5:47

Refs

Refs

nesting cannot be done

Selecting previous siblings with CSS :has()

Selecting a previous sibling was for long impossible, but is now a breeze with the has() pseudo-class

https://tobiasahlin.com/blog/previous-sibling-css-has/

Is there a CSS parent selector?

CSS4 will be fancy if it adds some hooks into walking backwards. Until then it is possible (though not advisable) to use checkbox and/or radio to break the usual way that things are connected, and through that also allow CSS to operate outside of its normal scope... ...

https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector

State of CSS 2022

Web styling features of today and tomorrow, as seen at Google IO 2022, plus some extras. The year 2022 is set to be one of CSS's greatest years, in both features and cooperative browser feature releases, with a collaborative goal to implement 14 features!

State of CSS 2022

https://web.dev/state-of-css-2022/

State of CSS 2022

The CSS :has() selector is way more than a "Parent Selector"

Safari Technology Preview 137 just dropped, with unflagged support for CSS :has(). Often dubbed "the parent selector", CSS :has() is way more than that ... ~ As per selectors-4 specification: The :has() CSS pseudo-class represents an element if any of the selectors passed as parameters match at least one element.

https://www.bram.us/2021/12/21/the-css-has-selector-is-way-more-than-a-parent-selector/

The CSS :has() selector is way more than a "Parent Selector"

Usage

Thread by @jh3yy on Thread Reader App

Future CSS Tip! 🔮 Use :has() to power micro-interactions and theme 😎 No JavaScript. Animations powered by state 🚀 .group:has(:invalid) { animation: shake 0.5s; } form:has(.email:valid):has(.password:valid) .submit { --color: green; } Demo link below 👇 Here's that @CodePen link!

Thread by @jh3yy on Thread Reader App

https://threadreaderapp.com/thread/1549101796794273795.html?s=20&t=CcTrxVtOxoz7e35DYYcf5Q

Thread by @jh3yy on Thread Reader App

Recommendations

//////////