Comments on: Meet `:has`, A Native CSS Parent Selector https://css-tricks.com/meet-has-a-native-css-parent-selector/ Tips, Tricks, and Techniques on using Cascading Style Sheets. Thu, 15 Jul 2021 21:36:20 +0000 hourly 1 https://wordpress.org/?v=6.1.1 By: Auri https://css-tricks.com/meet-has-a-native-css-parent-selector/#comment-1776445 Thu, 15 Jul 2021 21:36:20 +0000 https://css-tricks.com/?p=344355#comment-1776445 I feel like every week a new article about the :has selector is posted here, and there’s never any new information either. As far as I’m concerned, until I see it in Canary it’s not worth any thought.

]]> By: D7460N https://css-tricks.com/meet-has-a-native-css-parent-selector/#comment-1776245 Tue, 13 Jul 2021 20:16:42 +0000 https://css-tricks.com/?p=344355#comment-1776245 YUGE use case:

Combining :has() and CSS’s ever present (live) reactive nature, rules can be written to “anticipate” and then react to dynamically loaded data with child selectors and or attributes without the use of JavaScript.

This promotes the Least Power Principle and a cleaner decoupling and separation of concerns .

Simple example… Only when these CSS rule becomes true will the loading animation go away and the parent container slide onto the screen.

.parent {
    width: 300px;
    margin-right: -300px;
    transition: margin-right: 250ms;
}
.parent .loading-animation {
    display: block;
}
.parent:has(.dynamic-content[data-payload="complete"]) {
    margin-right: 0;
}
.parent:has(.dynamic-content[data-payload="complete"]) .loading-animation {
    display: none;
}
]]>