{"id":344355,"date":"2021-07-12T12:45:00","date_gmt":"2021-07-12T19:45:00","guid":{"rendered":"https:\/\/css-tricks.com\/?p=344355"},"modified":"2021-07-12T12:45:05","modified_gmt":"2021-07-12T19:45:05","slug":"meet-has-a-native-css-parent-selector","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/meet-has-a-native-css-parent-selector\/","title":{"rendered":"Meet `:has`, A Native CSS Parent Selector"},"content":{"rendered":"\n

The reasons that are often cited that make container queries difficult or impossible is things like infinite loops\u2014e.g. changing the width of an element, invalidating a container query, which changes the width again, which makes the container query take effect, etc. But that was solved with containment. A “parent selector”, or :has<\/code> as it is now been officially dubbed<\/a> (I like it, that’s how jQuery rolled<\/a>, although Adrian pointed out a tweet<\/a> noting that it’s more versatile), has traditionally had similar problems. Things like requiring “multiple pass” rendering which is too slow to be acceptable. <\/p>\n\n\n\n\n\n\n\n

Brian Kardell says:<\/a><\/p>\n\n\n\n

Primarily, even without :has()<\/code> it’s pretty hard to live up to performance guarantees of CSS, where everything continue to evaluate and render “live” at 60fps. If you think, mathematically, about just how much work is conceptually involved in applying hundreds or thousands of rules as the DOM changes (including as it is parsing), it’s quite a feat as is.

Engines have figured out how to optimize this based on clever patterns and observations that avoid the work that is conceptually necessary – and a lot of that is sort of based on these subject invariants that has()<\/code> would appear to throw to the wind.<\/p><\/blockquote>\n\n\n\n

The fact that there is a spec now is super encouraging, and that it has Igalia’s eye on it. Apparently, some of the performance problems have either been surmounted or, through testing, determined to be negligible enough to remain a shippable feature.<\/p>\n\n\n\n

Adrian Bece digs into<\/a> it all!<\/p>\n\n\n\n

The team at Igalia has worked on some notable web engine features like CSS grid<\/a> and container queries<\/a>, so there is a chance for :has<\/code> selector to see the light of day, but there is still a long way to go.<\/p>

What makes relational selector one of the most requested features in the past few years and how are the developers working around the missing selector? In this article, we\u2019re going to answer those questions and check out the early spec of :has<\/code> selector<\/strong> and see how it should improve the styling workflow once it\u2019s released.<\/p><\/blockquote>\n\n\n\n

Let’s cross our fingers. I’ve been watching this for 10 years<\/a> and trying to document use cases<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"

The reasons that are often cited that make container queries difficult or impossible is things like infinite loops\u2014e.g. changing the width of an element, invalidating a container query, which changes the width again, which makes the container query take effect, etc. But that was solved with containment. A “parent selector”, or :has as it is […]<\/p>\n","protected":false},"author":3,"featured_media":336459,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"I've been watching this for 10 years and trying to document use cases.","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[17],"tags":[18909,1137],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/03\/has-pseudo-example.png?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":307873,"url":"https:\/\/css-tricks.com\/david-barons-thoughts-on-an-implementable-path-forward-for-container-queries\/","url_meta":{"origin":344355,"position":0},"title":"[David Baron’s] Thoughts on an implementable path forward for Container Queries","date":"April 29, 2020","format":false,"excerpt":"That's the title of a public post from David Baron, a Principal Engineer at Firefox, with thoughts toward container queries. I know a lot of people have been holding their breath waiting for David's ideas, as he's one of few uniquely qualified to understand the ins and outs of this\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":352210,"url":"https:\/\/css-tricks.com\/container-units-should-be-pretty-handy\/","url_meta":{"origin":344355,"position":1},"title":"Container Units Should Be Pretty Handy","date":"September 22, 2021","format":false,"excerpt":"Container queries are going to solve this long-standing issue in web design where we want to make design choices based on the size of an element (the container) rather than the size of the entire page. So, if a container is 600px wide, perhaps it has a row-like design, but\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/09\/intro-2-2.jpg?fit=1200%2C684&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":243825,"url":"https:\/\/css-tricks.com\/full-width-containers-limited-width-parents\/","url_meta":{"origin":344355,"position":2},"title":"Full Width Containers in Limited Width Parents","date":"July 25, 2016","format":false,"excerpt":"I bookmarked a tweet a few months ago, as it was a bonafide CSS trick and that's what we love around here. The issue is: how do we make a full-browser-width container when we're inside a limited-width parent? Starting Point This image is 100% wide as it's limited-width parent. We\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":339138,"url":"https:\/\/css-tricks.com\/next-gen-css-container\/","url_meta":{"origin":344355,"position":3},"title":"Next Gen CSS: @container","date":"May 11, 2021","format":false,"excerpt":"Chrome is experimenting with @container, a property within the CSS Working Group Containment Level 3 spec being championed by Miriam Suzanne of Oddbird, and a group of engineers across the web platform. @container brings us the ability to style elements based on the size of their parent container. The @container\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/05\/Screen-Shot-2021-05-11-at-7.38.01-AM.png?fit=1200%2C550&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":204448,"url":"https:\/\/css-tricks.com\/container-queries-once-more-unto-the-breach\/","url_meta":{"origin":344355,"position":4},"title":"Container Queries: Once More Unto the Breach","date":"July 1, 2015","format":false,"excerpt":"I guess the plan is to stop with the \"element queries\" and start thinking and referring to them as \"container queries\". We've been following this saga for a while. Element queries have a serious pitfall: infinite loops. .our-element:media(min-width: 500px) { width: 499px; } As Responsive Issues Community Group member Mat\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":375728,"url":"https:\/\/css-tricks.com\/a-few-times-container-size-queries-would-have-helped-me-out\/","url_meta":{"origin":344355,"position":5},"title":"A Few Times Container Size Queries Would Have Helped Me Out","date":"December 13, 2022","format":false,"excerpt":"CSS Container Queries are still gaining traction and many of us are getting our hands wet with them, even if it\u2019s for little experiments or whatnot. They\u2019ve got great, but not quite full, browser support \u2014 enough to justify using them in some projects, but maybe not to the extent\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/12\/container-queries-card-code.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/344355"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=344355"}],"version-history":[{"count":3,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/344355\/revisions"}],"predecessor-version":[{"id":344367,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/344355\/revisions\/344367"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/336459"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=344355"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=344355"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=344355"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}