{"id":376331,"date":"2023-01-20T07:34:09","date_gmt":"2023-01-20T15:34:09","guid":{"rendered":"https:\/\/css-tricks.com\/?p=376331"},"modified":"2023-01-23T08:00:57","modified_gmt":"2023-01-23T16:00:57","slug":"more-real-world-uses-for-has","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/more-real-world-uses-for-has\/","title":{"rendered":"More Real-World Uses for :has()"},"content":{"rendered":"\n<p><a href=\"https:\/\/css-tricks.com\/almanac\/selectors\/h\/has\/\">The <code>:has()<\/code> pseudo-class<\/a> is, hands-down, my favorite new CSS feature. I know it is for many of you as well, at least <a href=\"https:\/\/2022.stateofcss.com\/en-US\/features\/selectors\/#has_selector\" rel=\"noopener\">those of you who took the State of CSS survey<\/a>. The ability to write selectors upside down gives us more superpowers I\u2019d never thought possible.<\/p>\n\n\n\n<p>I say \u201cmore superpowers\u201d because there have already been a ton of really amazing clever ideas published by a bunch of super smart people, like:<\/p>\n\n\n\n<ul>\n<li><a href=\"https:\/\/webkit.org\/blog\/13096\/css-has-pseudo-class\/\" rel=\"noopener\">Using <code>:has()<\/code> as a CSS Parent Selector and much more<\/a> by Jen Simmons<\/li>\n\n\n\n<li><a href=\"https:\/\/www.bram.us\/2022\/12\/13\/quantity-queries-for-islands-of-elements-with-the-same-class-thanks-to-css-has\/\" rel=\"noopener\">Quantity Queries for \u201cislands of elements\u201d with the same class, thanks to CSS <code>:has()<\/code><\/a> by Bramus<\/li>\n\n\n\n<li><a href=\"https:\/\/www.bram.us\/2022\/11\/17\/style-a-parent-element-based-on-its-number-of-children-using-css-has\/\" rel=\"noopener\">Style a parent element based on its number of children<\/a> by Bramus<\/li>\n\n\n\n<li><a href=\"https:\/\/www.matuzo.at\/blog\/2022\/100daysof-day36\/\" rel=\"noopener\">Using combinators in <code>:has()<\/code><\/a> by Manuel Matuzovi\u0107<\/li>\n\n\n\n<li><a href=\"https:\/\/austingil.com\/css-has-with-html-forms\/\" rel=\"noopener\">4 ways CSS <code>:has()<\/code> can make your HTML forms even better<\/a> by Austin Gil<\/li>\n\n\n\n<li><a href=\"https:\/\/www.youtube.com\/watch?v=ljD_ENTYuB8&amp;t=233s\" rel=\"noopener\">Video: Practical Use Cases for <code>:has()<\/code> Pseudo-Class<\/a> by Zoran Jambor<\/li>\n\n\n\n<li><a href=\"https:\/\/developer.chrome.com\/blog\/has-m105\/\" rel=\"noopener\"><code>:has()<\/code>: the family selector<\/a> by Jhey Tompkins<\/li>\n<\/ul>\n\n\n\n<p>This article is not a definitive guide to <code>:has()<\/code>. It\u2019s also not here to regurgitate what\u2019s already been said. It\u2019s just me (hi &#x1f44b;) jumping on the bandwagon for a moment to share some of the ways I\u2019m most likely to use <code>:has()<\/code> in my day-to-day work&#8230; that is, once browser support is good enough. (Firefox is the last holdout, but will support it, <a href=\"https:\/\/bugzilla.mozilla.org\/show_bug.cgi?id=418039\" rel=\"noopener\">which is imminent<\/a>.)<\/p>\n\n\n\n<p>When that does happen, you can bet I\u2019ll start using <code>:has()<\/code> all over the place. Here are some real-world examples of things I\u2019ve built recently and thought to myself, \u201cGee, this\u2019ll be so much nicer once <code>:has()<\/code> is fully supported.\u201d<\/p>\n\n\n\n<!--more-->\n\n\n<h3 class=\"wp-block-heading\" id=\"avoid-having-to-reach-outside-your-javascript-component\">Avoid having to reach outside your JavaScript component<\/h3>\n\n\n<p>Have you ever built an interactive component that sometimes needs to affect styles somewhere else on the page? Take the following example, where <code>&lt;nav&gt;<\/code> is a <a href=\"https:\/\/css-tricks.com\/i-saw-two-mega-menus-today\/\">mega menu<\/a>, and opening it changes the colors of the <code>&lt;header&gt;<\/code> content above it.<\/p>\n\n\n\n<figure class=\"wp-block-video wp-block-embed is-type-video is-provider-videopress\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"VideoPress Video Player\" aria-label='VideoPress Video Player' width='500' height='327' src='https:\/\/videopress.com\/embed\/lMwSROdv?cover=1&amp;playsinline=1&amp;preloadContent=metadata&amp;useAverageColor=1&amp;hd=0' frameborder='0' allowfullscreen data-resize-to-parent=\"true\" allow='clipboard-write'><\/iframe><script src='https:\/\/v0.wordpress.com\/js\/next\/videopress-iframe.js?m=1674852142'><\/script>\n<\/div><\/figure>\n\n\n\n<p>I feel like I need to do this kind of thing <em>all the time<\/em>.<\/p>\n\n\n\n<p>This particular example is a React component I made for a site. I had to \u201creach outside\u201d the React part of the page with <code>document.querySelector(...)<\/code> and toggle a class on the <code>&lt;body&gt;<\/code>, <code>&lt;header&gt;<\/code>, or another component. That\u2019s not the end of the world, but it sure feels a bit yuck. Even in a fully React site (a Next.js site, say), I\u2019d have to choose between managing a <code>menuIsOpen<\/code> state way higher up the component tree, or do the same DOM element selection \u2014 which isn\u2019t very React-y.<\/p>\n\n\n\n<p>With <code>:has()<\/code>, the problem goes away:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">header:has(.megamenu--open) {\n  \/* style the header differently if it contains \n    an element with the class \".megamenu--open\"\n  *\/\n}<\/code><\/pre>\n\n\n\n<p>No more fiddling with other parts of the DOM in my JavaScript components!<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"better-table-striping-ux\">Better table striping UX<\/h3>\n\n\n<p>Adding alternate row \u201cstripes\u201d to your tables can be a nice UX improvement. They help your eyes keep track of which row you\u2019re on as you scan the table.<\/p>\n\n\n\n<p>But in my experience, this doesn\u2019t work great on tables with just two or three rows. If you have, for example, a table with three rows in the <code>&lt;tbody&gt;<\/code> and you\u2019re \u201cstriping\u201d every \u201ceven\u201d row, you could end up with just one stripe. That\u2019s not really worth a pattern and might have users wondering what\u2019s so special about that one highlighted row.<\/p>\n\n\n\n<p>Using this technique where <a href=\"https:\/\/www.bram.us\/2022\/11\/17\/style-a-parent-element-based-on-its-number-of-children-using-css-has\/\" rel=\"noopener\">Bramus uses <code>:has()<\/code> to apply styles based on the number of children<\/a>, we can apply table stripes when there are more than, say, three rows:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_dyjyqmR\" src=\"\/\/codepen.io\/anon\/embed\/dyjyqmR?height=450&amp;theme-id=1&amp;slug-hash=dyjyqmR&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed dyjyqmR\" title=\"CodePen Embed dyjyqmR\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>What to get fancier? You could also decide to only do this if the table has at least a certain number of columns, too:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">table:has(:is(td, th):nth-child(3)) {\n  \/* only do stuff if there are three or more columns *\/\n}<\/code><\/pre>\n\n\n<h3 class=\"wp-block-heading\" id=\"remove-conditional-class-logic-from-templates\">Remove conditional class logic from templates<\/h3>\n\n\n<p>I often need to change a page layout depending on what\u2019s on the page. Take the following Grid layout, where the placement of the main content changes grid areas depending on whether there\u2019s a sidebar present.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2736\" height=\"2300\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/12\/s_3C0A8FC3F034E5EE17FAF2704E4BF0FB7F3CBE50853FB2A8A6B7B502A838DC20_1671494338550_ScreenShot2022-12-19at11.23.58AM.png?resize=2736%2C2300&#038;ssl=1\" alt=\"Layout with left sidebar above a layout with no sidebar.\" class=\"wp-image-376336\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/12\/s_3C0A8FC3F034E5EE17FAF2704E4BF0FB7F3CBE50853FB2A8A6B7B502A838DC20_1671494338550_ScreenShot2022-12-19at11.23.58AM.png?w=2736&amp;ssl=1 2736w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/12\/s_3C0A8FC3F034E5EE17FAF2704E4BF0FB7F3CBE50853FB2A8A6B7B502A838DC20_1671494338550_ScreenShot2022-12-19at11.23.58AM.png?resize=300%2C252&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/12\/s_3C0A8FC3F034E5EE17FAF2704E4BF0FB7F3CBE50853FB2A8A6B7B502A838DC20_1671494338550_ScreenShot2022-12-19at11.23.58AM.png?resize=1024%2C861&amp;ssl=1 1024w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/12\/s_3C0A8FC3F034E5EE17FAF2704E4BF0FB7F3CBE50853FB2A8A6B7B502A838DC20_1671494338550_ScreenShot2022-12-19at11.23.58AM.png?resize=768%2C646&amp;ssl=1 768w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/12\/s_3C0A8FC3F034E5EE17FAF2704E4BF0FB7F3CBE50853FB2A8A6B7B502A838DC20_1671494338550_ScreenShot2022-12-19at11.23.58AM.png?resize=1536%2C1291&amp;ssl=1 1536w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/12\/s_3C0A8FC3F034E5EE17FAF2704E4BF0FB7F3CBE50853FB2A8A6B7B502A838DC20_1671494338550_ScreenShot2022-12-19at11.23.58AM.png?resize=2048%2C1722&amp;ssl=1 2048w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<p>That\u2019s something that might depend on whether there are sibling pages set in the CMS. I\u2019d normally do this with template logic to conditionally add <a href=\"https:\/\/css-tricks.com\/taming-the-cascade-with-bem-and-modern-css-selectors\/\">BEM modifier classes<\/a> to the layout wrapper to account for both layouts. That CSS might look something like this (responsive rules and other stuff omitted for brevity):<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">\/* m = main content *\/\n\/* s = sidebar *\/\n.standard-page--with-sidebar {\n  grid-template-areas: 's s s m m m m m m m m m';\n}\n.standard-page--without-sidebar {\n  grid-template-areas: '. m m m m m m m m m . .';\n}<\/code><\/pre>\n\n\n\n<p>CSS-wise, this is totally fine, of course. But it does make the template code a little messy. Depending on your templating language it can get pretty ugly to conditionally add a bunch of classes, especially if you have to do this with lots of child elements too.<\/p>\n\n\n\n<p>Contrast that with a <code>:has()<\/code>-based approach:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">\/* m = main content *\/\n\/* s = sidebar *\/\n.standard-page:has(.sidebar) {\n  grid-template-areas: 's s s m m m m m m m m m';\n}\n.standard-page:not(:has(.sidebar)) {\n  grid-template-areas: '. m m m m m m m m m . .';\n}<\/code><\/pre>\n\n\n\n<p>Honestly, that\u2019s not a whole lot better CSS-wise. But removing the conditional modifier classes from the HTML template is a nice win if you ask me.<\/p>\n\n\n\n<p>It\u2019s easy to think of micro design decisions for <code>:has()<\/code> \u2014 <a href=\"https:\/\/css-tricks.com\/creating-animated-clickable-cards-with-the-has-relational-pseudo-class\/\">like a card when it has an image in it<\/a> \u2014 but I think it\u2019ll be really useful for these macro layout changes too.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"better-specificity-management\">Better specificity management<\/h3>\n\n\n<p>If you read <a href=\"https:\/\/css-tricks.com\/taming-the-cascade-with-bem-and-modern-css-selectors\/\">my previous article<\/a>, you\u2019ll know I\u2019m a stickler for specificity. If, like me, you don\u2019t want your specificity scores blowing out when adding <code>:has()<\/code> and <code>:not()<\/code> throughout your styles, be sure to use <code>:where()<\/code>.<\/p>\n\n\n\n<p>That\u2019s because the specificity of <code>:has()<\/code> is based on <em>the most specific element in its argument list<\/em>. So, if you have something like an ID in there (why, I&#8217;m not sure!), your selector is going to be tough to override in the cascade.<\/p>\n\n\n\n<p>On the other hand, <a href=\"https:\/\/css-tricks.com\/almanac\/selectors\/w\/where\/\">the specificity of <code>:where()<\/code> is always zero<\/a>, never adding to the specificity score.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">\/* specificity score: 0,1,0.\n  Same as a .standard-page--with-sidebar \n  modifier class\n*\/\n.standard-page:where(:has(.sidebar)) {\n  \/* etc *\/\n}<\/code><\/pre>\n\n\n<h3 class=\"wp-block-heading\" id=\"the-futures-bright\">The future\u2019s bright<\/h3>\n\n\n<p>These are just a few things I can\u2019t wait to be able to use in production. <a href=\"https:\/\/css-tricks.com\/almanac\/selectors\/h\/has\/#aa-use-cases\">The CSS-Tricks Almanac has a bunch of examples, too.<\/a> What are you looking forward to doing with <code>:has()<\/code>? What sort of some real-world examples have you run into where <code>:has()<\/code> would have been the perfect solution?<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The :has() pseudo-class is, hands-down, my favorite new CSS feature. I know it is for many of you as well, at least those of you who took the State of CSS survey. The ability to write selectors upside down gives us more superpowers I\u2019d never thought possible. I say \u201cmore superpowers\u201d because there have already [&hellip;]<\/p>\n","protected":false},"author":288720,"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":"More Real-World Uses for :has() by Liam Johnston","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[4],"tags":[18909],"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":235714,"url":"https:\/\/css-tricks.com\/caring-about-opentype-features\/","url_meta":{"origin":376331,"position":0},"title":"Caring about OpenType features","date":"December 9, 2015","format":false,"excerpt":"Type aficionado Tim Brown has written a great piece about how to make typographic enhancements with the OpenType features of a web font. These additions can be subtle, such as ligatures and small caps, but other tools such as kerning or contextual alternates can often have a big impact on\u2026","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":356146,"url":"https:\/\/css-tricks.com\/exactly-what-you-want\/","url_meta":{"origin":376331,"position":1},"title":"Exactly What You Want","date":"December 1, 2021","format":false,"excerpt":"What is one thing people can do to make their website better? Exactly what you want to build! Ask yourself: What drew you to development in the beginning?Is there an experimental API that you\u2019ve been wanting to try out?What could you spend all night hacking away at, just for the\u2026","rel":"","context":"In &quot;2021 End-of-Year Thoughts&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/11\/functional-css.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":340716,"url":"https:\/\/css-tricks.com\/the-humble-img-element-and-core-web-vitals\/","url_meta":{"origin":376331,"position":2},"title":"The Humble `img` Element And Core Web Vitals","date":"May 17, 2021","format":false,"excerpt":"Addy Osmani on images in HTML: The humble\u00a0<img>\u00a0element has gained some superpowers over the years. Given how central it is to image optimization on the web, let\u2019s catch up on what it can do and how it can help improve user experience and the\u00a0Core Web Vitals. Addy does a good\u2026","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/05\/11-humble-img-element-and-core-web-vitals.png?fit=1200%2C736&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":356433,"url":"https:\/\/css-tricks.com\/spicy-sections\/","url_meta":{"origin":376331,"position":3},"title":"Spicy Sections","date":"December 7, 2021","format":false,"excerpt":"What if HTML had \"tabs\"? That would be cool, says I. Dave has been spending some of his time and energy, along with a group of \"Tabvengers\" from OpenUI, on this. A lot of research leads to a bit of a plot twist: Our research showed there are a lot\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/11\/Screen-Shot-2021-11-30-at-9.36.03-AM.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":311360,"url":"https:\/\/css-tricks.com\/the-modern-web\/","url_meta":{"origin":376331,"position":4},"title":"&#8220;The Modern Web&#8221;","date":"May 22, 2020","format":false,"excerpt":"A couple of interesting articles making the rounds: Tom MacWrite: Second-guessing the modern webRich Harris: In defense of the modern web I like Tom's assertion that React (which he's using as a stand-in for JavaScript frameworks in general) has an ideal usage: There is a sweet spot of React: in\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/08\/website-lightning.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":353219,"url":"https:\/\/css-tricks.com\/websites-we-like-md-nichrome\/","url_meta":{"origin":376331,"position":5},"title":"Websites We Like: MD Nichrome","date":"October 6, 2021","format":false,"excerpt":"Here\u2019s a beautiful website: it\u2019s a type specimen for Mass-Driver\u2019s ever-so-lovely type family MD Nichrome. There\u2019s a ton of nifty animations and graphics explaining all the features inside\u2026 If you're wondering how those animations work, they're actually styled <video> elements. There\u2019s lots of great graphic design touches as well, such\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/10\/CleanShot-2021-10-04-at-08.35.26.png?fit=1200%2C630&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/376331"}],"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\/288720"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=376331"}],"version-history":[{"count":8,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/376331\/revisions"}],"predecessor-version":[{"id":376656,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/376331\/revisions\/376656"}],"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=376331"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=376331"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=376331"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}