CSS :has( ) A Parent Selector Now Posted April 10, 2022 by Matthias Ott 690 Webmentions #:has #css #layout #pseudo-classes #selectors I don’t remember the exact moment anymore. But I remember that it was with a mix of disbelief and disappointment that I realized one day that there was no way to select the parent of an element in CSS. Wait, what? This can’t be. Why? Obviously, I wasn’t alone. Everyone who has ever learned CSS has probably found themselves in the same situation and asked themselves the same question: Why is it that we don’t have a parent selector in CSS? As Jonathan Snook described in an elaborate post back in 2010, it was not only because of performance concerns but also because of the way browsers render a document and apply the computed styles to elements: as a stream, one element after the other as they come in. When an element is rendered to the viewport, its parent is already there, including all its beautiful styling. Repainting the parent – and, consequently, all other parents – after the fact would then require another evaluation of all parent selectors. This, Remy Sharp agreed back then, would again be so expensive on the render engine that it wouldn't make sense to implement a parent selector. So, we all accepted the inevitable and did our best to work around it. We added helper classes to our templates via back-end logic or with JavaScript in the frontend. And it somewhat worked. But in almost every project, there still was this one moment where a parent selector would have been the quickest and most “materially honest” solution. :has has arrived # All of this changed last month when Apple released Safari 15.4 which, as the first browser, supports the :has() pseudo-class, which is one of the CSS Level 4 Selectors. “It was long thought such a selector was not possible, but our team figured out a way to highly optimize performance and deliver a flexible solution that does not slow the page,” Jen Simmons and Jon Davis wrote in the release notes. There it is. A parent selector. But :has is not only useful as a parent selector. It also opens up a lot more interesting opportunities. But first, let’s have a look at how it works. The :has pseudo-class takes a relative selector list and will then represent an element if at least one other element matches the selectors in the list. Sounds overly complicated when you write it down, so here is a basic example. Let’s say you want to select all button elements which include an svg element, like an icon. You can now write: button:has(svg) { … } Try the CodePen demo – and make sure to view it in Safari 15.4. ;) Or, if you want to style an article differently if it has a headline inside that is followed by a paragraph: article:has(h2 + p, h3 + p) { … } You can also combine :has with the :not pseudo-class to select an element if it does not contain certain other elements, in this case, a headline: section:not(:has(h1, h2, h3, h4, h5, h6)) { … } It is also possible to use pseudo-classes like :hover, :focus, or :checked. You could style a form element when a checkbox inside has been checked, for example: form:has(input[type="checkbox"]:checked) { … } You could then also use the general sibling combinator ~ to change the styling of the form depending on how many of the checkboxes have been selected: /* Two checkboxes are :checked… */ form:has(input[type="checkbox"]:checked ~ input[type="checkbox"]:checked) { box-shadow: inset 0 0 0 0.5rem blue; background-color: rgb(150, 187, 235); } /* Three checkboxes are :checked… */ form:has(input[type="checkbox"]:checked ~ input[type="checkbox"]:checked ~ input[type="checkbox"]:checked) { box-shadow: inset 0 0 0 0.5rem rgb(0, 160, 0); background-color: rgb(136, 233, 136); } Try the CodePen demo. Although this demo might not be the most practical example, all this is still starting to get interesting, right? Using :has to adjust a Grid # CSS Grid generally works from the container in and before :has, there wasn’t really a way to adjust the Grid based on what’s inside. What if we could use :has to adjust the CSS Grid layout of a container based on the number of elements inside of it? Here, so-called quantity queries can be useful. Heydon Pickering has written the ultimate article about them. By combining the :nth-child and :nth-last-child pseudo-classes inside our :has selector list, we can adjust the layout by “counting” the elements inside. Here is how we can target a grid with two elements inside, for example: .grid:has(:nth-child(2):last-child) { grid-template-columns: 1fr 1fr; } So, if our Grid container has an element inside that is both the second child as well as the last child of our container, the grid should have two columns. The same also works with three columns: .grid:has(:nth-child(3):last-child) { grid-template-columns: 1fr 1fr 1fr; } Finally, we can also create a grid layout that has four columns if the container has four or more elements inside. To achieve this, we select at least one element that is either the fourth or one of all following elements: .grid:has(:nth-child(n+4)) { grid-template-columns: repeat(4, 1fr); } Here is a CodePen demo again. As you can see, there are lots of amazing use cases for :has as a parent selector and it still feels like this is only scratching the surface of what people will come up with. :has lets us style elements based on whether the child of an element is selected, has focus, or whether it is present at all. And we can even target an element based on how many children it has. All this will allow for much more flexible components. Just think of all the variations of content and context that can exist inside a design system and you know how valuable this will be. But wait, there is more! :has as a previous sibling selector # Because :has accepts a relative selector list, you can also select an element if it has another element that follows it. Or, in other words, we can use :has to select the previous sibling of an element: :has(+ .second) { background-color: darkmagenta; } Try it on CodePen. Again, there are so many practical use cases for this! For example, you could style an image differently when there is a caption below it: figure img:has(+ figcaption) { /* Do something with the image */ } The possibilities of using :has in useful and creative ways to write more flexible and robust CSS seem endless. And as is the case with so many of the new features that are currently being added to CSS, I can't wait to see what other creative uses for :has you all come up with. One recent example is this brilliant demo by Michelle Barker, where she combines animated grid tracks with the :has selector. Testing for support # For now, Safari is the only browser with support for :has. In the upcoming version 101 of Chrome, you’ll be able to activate it via the Experimental Web Platform features flag, however. While this is promising, it will certainly take a little while until :has is supported by the majority of browsers. In the meantime, we can once more use progressive enhancement to already use :has in browsers that support it. As Michelle Barker notes, you can test for support for :has with a @supports feature query using the selector() function: @supports selector(:has(*)) { /* Code for browsers with support for :has */ } Thus, you can target supporting browsers in a future friendly way. Because once :has is supported by another browser, your code will work automatically in this browser as well. Do you have more ideas about how to use :has? Have you seen more interesting examples and demos? And will you start using it already? Let me know via Webmention, email, or Twitter. Links # Meet :has, A Native CSS Parent Selector (And More), by Adrian Bece :has() Has Landed in Safari, by Michelle Barker The CSS :has() selector is way more than a “Parent Selector”, by Bramus Van Damme The CSS :has Selector (and 4+ Examples), by Robin Rendle Using :has() as a CSS Parent Selector and much more, by Jen Simmons ~ 690 Webmentions COMMENTSENSE CSS :has( ) A Parent Selector Now · Matthias Ott – User Experience Designer matthiasott.com/notes/css-has-… İ;lker Kurtel 1- webkit.org/blog/13096/css… 2- css-irl.info/animated-grid-… 3- matthiasott.com/notes/css-has-… 4- daverupert.com/2022/07/solvin… 5- css-tricks.com/the-css-has-se… 6- blog.logrocket.com/advanced-guide… 7- developer.chrome.com/blog/has-m105/ 8- bram.us/2021/12/21/the… Matthias Ott Also added it to the list of resources at the bottom of my :has() article from earlier this year: matthiasott.com/notes/css-has-… Helen i:not(:has(time)) but still excited for when this pseudo-selector gets more support! A helpful/hype article about this matthiasott.com/notes/css-has-… @m_ott via @CodePen Jorge Luiz Every day the CSS world has presented steady improments. Have a look at the article bellow: matthiasott.com/notes/css-has-… Neil matthiasott.com/notes/css-has-… Matthias Ott Yes, that’s true, I would not use it for anything super critical at the moment. But it’s on the horizon (also in Chrome), so I already started adding it here and there for little (progressive) enhancements. 🤫😜 thorsten But Browser Support is quite bad in the moment caniuse.com/css-has Robert DeVore CSS :has() A Parent Selector Now matthiasott.com/notes/css-has-… via @m_ott Dave CSS :has( ) A Parent Selector Now, by @m_ott matthiasott.com/notes/css-has-… Garry Kane CSS :has( ) A Parent Selector Now, by @m_ott matthiasott.com/notes/css-has-… Michael Bladowski #CSS :has( ) A Parent Selector Now · Matthias Ott – User Experience Designer matthiasott.com/notes/css-has-… Lukas Borawski Finally, :has has arrived 😃 #css #web #dev #programming matthiasott.com/notes/css-has-… Ann CSS :has( ) A Parent Selector Now, by @m_ott matthiasott.com/notes/css-has-… Joulse CSS :has( ) A Parent Selector Now matthiasott.com/notes/css-has-… Friday Front-End CSS :has( ) A Parent Selector Now, by @m_ott matthiasott.com/notes/css-has-… Ashraf Hamdy This is quite interesting! CSS :has( ) A Parent Selector Now, by @m_ott matthiasott.com/notes/css-has-… Marco Von Ballmoos CSS :has( ) A Parent Selector Now · Matthias Ott – User Experience Designer matthiasott.com/notes/css-has-… via @instapaper Fresh Frontend Links CSS :has( ) A Parent Selector Now matthiasott.com/notes/css-has-… Sergey Romanenko Matthias Ott explains how the :has() selector works and shows how it's not only useful as a parent selector. matthiasott.com/notes/css-has-… #css Yohan J. Rodríguez #CSS #Automated | CSS :has() A Parent Selector Now matthiasott.com/notes/css-has-… Tammy Jensen CSS :has( ) A Parent Selector Now, by @m_ott matthiasott.com/notes/css-has-… MJCoder #CSS :has( ) A Parent Selector Now · Matthias Ott – User Experience Designer matthiasott.com/notes/css-has-… by @m_ott я;є;αℓ;ιѕ;т; נ;ανѕ;т;αн; #CSS :has( ) A Parent Selector Now, by @m_ott matthiasott.com/notes/css-has-… Lazy McGrady nah this is dope CSS :has( ) A Parent Selector Now, by @m_ott matthiasott.com/notes/css-has-… D7460N matthiasott.com/notes/css-has-… Kat Fay Here's a really helpful explanation of new the :has() #CSS selector by @m_ott 🙏🏻 Explained so that #CodeNewbies like me 🌱 can understand, it also goes into detail for the #webdesign experts out there 🧙🏻♂;️; ⌨;️; CSS :has( ) A Parent Selector Now, by @m_ott matthiasott.com/notes/css-has-… dailydevlinks. 📝 CSS :has( ) A Parent Selector Now 🔗 matthiasott.com/notes/css-has-… #html #css #javascript #webdev Mengxi Lu We were promised flying cars, and we got something very close. :has( ) has arrived. matthiasott.com/notes/css-has-… Chiyana Simões ; CSS :has( ) A Parent Selector Now · Matthias Ott – User Experience Designer matthiasott.com/notes/css-has-… nuncapops CSS :has( ) A Parent Selector Now · Matthias Ott – User Experience Designer matthiasott.com/notes/css-has-… Joseph Klem Good news for front-end designers and devs — by @m_ott matthiasott.com/notes/css-has-… Jacky CSS :has( ) A Parent Selector Now · Matthias Ott – User Experience Designer matthiasott.com/notes/css-has-… Muhammad Hameed Sarwar matthiasott.com/notes/css-has-… #frontenddevelopment #twitter #CSS #softwaredevelopment #stylingtips #frontenddeveloper #softwareengineering #css Tom CSS :has( ) A Parent Selector Now, by @m_ott matthiasott.com/notes/css-has-… Pinboard Popular CSS :has( ) A Parent Selector Now · Matthias Ott – User Experience Designer matthiasott.com/notes/css-has-… 倪;爽; CSS 开;始;支;持;父;选;择;器;了; 我;们;一;直;都;被;教;育;：;CSS 不;能;直;接;定;义;父;级;元;素;，;这;么;定;义;等;于;把;渲;染;完;的;元;素;重;新;渲;染;，;会;慢;死; 结;果;苹;果; Safari 开;始;支;持; :has() 伪;类;，;能;不;降;低;页;面;速;度;地;实;现;父;选;择;器;，;据;说;他;们;找;到;了;高;度;优;化;性;能;的;方;法; 这;位;设;... Rodrigo Noales ????; ????; - A.k.a. SonicByte Can't wait to test this... CSS :has( ) A Parent Selector Now, by @m_ott matthiasott.com/notes/css-has-… #css Antonio ☻; CSS :has( ) A Parent Selector Now, by @m_ott matthiasott.com/notes/css-has-… Daniel Pence 🤯 dirk döring article:has(.value) by @m_ott matthiasott.com/notes/css-has-… CSS :has( ) A Parent Selector Now, by @m_ott matthiasott.com/notes/css-has-… Save to Notion Saved to your Notion Workspace. These tags where saved to the tweet [Css] Ferdinand Vogler This is great. So everytime I’m using a modifier class such as .button—has-icon I can now use .button:has(.icon). Reduces some code 🙂 Thanks for the article. Oxk4r01 @SaveToNotion #Tweet #CSS Fatih Hayrioğ;lu CSS Parent seçicisini(:has) örnekler anlatan güzel bir makale. Parent uzun süredir beklediğ;imiz bir yetenekti. Gelince biraz duraksadı;k ama örnekleri gördükçe heyecanlanı;yorum.🎉 CSS :has( ) A Parent Selector Now · Matthias Ott – User Experience Designer matthiasott.com/notes/css-has-… Quentin Bellanger ":has()" parent selector will unlock so many possibilities and reduce the amount of code! #css matthiasott.com/notes/css-has-… Alex Hall CSS :has( ) A Parent Selector Now, by @m_ott matthiasott.com/notes/css-has-… Sigma:Funk CSS :has( ) A Parent Selector Now, by @m_ott matthiasott.com/notes/css-has-… Siavash CSS :has( ) A Parent Selector Now #CSS matthiasott.com/notes/css-has-… Régis LUTTER Isn’t Edge based on Chromium now ? kerasiotisme Hal-le-lu-jah! Pawel Grzybek "CSS :has( ) A Parent Selector Now" by @m_ott is so good. Bunch of practical examples of :has() pseudo-class + tons of CodePens. matthiasott.com/notes/css-has-… #css Must Creative CSS :has( ) A Parent Selector Now matthiasott.com/notes/css-has-… Mylo it is, but it probably has a seperate entry on compatibility for a reason Šime (she-meh) ????; I thought form:has(:nth-child(3 of :checked)) would work in Safari, but it doesn’t for some reason. Jakub T. Jankiewicz Hej @Comandeer2 obczaj swój komentarz na moim blogu z 2018. jcubic.pl/2018/04/selekt… Joel Berger Browsers may not have had the #css4 selector ":has" until now, but @mojolicious_org has had it for years! docs.mojolicious.org/Mojo/DOM/CSS#E… Christopher ????; I’m living in the future 😎😎😎 D7460N I really liked this, check it out : ✨;✍;️; New post: CSS :has( ) A Parent Selector Now matthiasott.com/notes/css-has-… — Matthias Ott 🇺🇦 (@m_ott) Apr 10, 2022 ng-gunma CSS :has( ) A Parent Selector Now · Matthias Ott – User Experience Designer matthiasott.com/notes/css-has-… pixelgeek Can I has this in all browsers soon pls? matthiasott.com/notes/css-has-… Gilbert CSS is a Prolog Matthias Ott ????;????; Yes, sure! I also mention this in the article. You could use a feature query to check for support if it makes sense to use it in a project already. Mylo apparently chrome has added it now, but i wouldn't immediately start using it everywhere. edge and firefox are widely used still Matthias Ott ????;????; Oh, yes! You could try it in Safari TP and write about it / create a CodePen demo. 😉😉😉 webkit.org/blog/12563/rel… Gunnar Bittersmann I’m using `:has()` in production. Ange Picard Imagine `:has` coupled to container queries. 🤯 Tim Dujardin Mylo using pseudo classes or pseudo elements without * before them acts as if it were there anyway Mylo Dennis Frank Yeah! It's so easy now to add a bit of custom theming. Speaking of theming: Simple theme switch with :has() codepen.io/df/pen/MWrBWbO Digital Art Creative Top story: CSS :has( ) A Parent Selector Now · Matthias Ott – User Experience Designer matthiasott.com/notes/css-has-…, see more tweetedtimes.com/helikopterdsgn… Jesse Wei A much needed selecor. long figs mccready holy shit! Matthias Ott ????;????; With :has are styling the button, not the svg Matthias Ott ????;????; 🤔 In “set these styles on the parent of this element”, “this element” needs to be selected via CSS, correct? E.g. ".my-class". If you then use :has(> .my-class) { … } you’re selecting the parent of this element without the need to know the HTML structure. Matthias Ott ????;????; I’d argue that there are other, much more efficient ways to improve performance (👀, JavaScript) than to optimize for selector performance. The differences are negligible, even * is not a problem anymore – although it would be interesting to see if this is different for :has… 🤔 Matthias Ott ????;????; You’re welcome, Hari! I am glad you got something out of it! 🤗 Matthias Ott ????;????; With accent-color…! 🎉🙂 sweetness and light This doesn’t make sense. How is it different than button svg Chris ????; Browsers I don't think "set these styles on this element if it contains these children" is the same as a parent selector. A parent selector would be "set these styles on the parent of this element". The important bit is that a parent selector doesn't need to know the HTML structure. George aka Gplus Web Thank you for the write-up, but I'd like to point out : most of these examples seem very inefficient selectors. What's the problem with adapting your HTML to suit your styling needs? Definitely more performant Andreas Eracleous Great tip! Matthias 🚀 Hari Madhav Very insightful and educative. Thanks for the article Dennis Frank CAN I HAS :HAS? Another use case I just prototyped: Style select based on option value codepen.io/df/pen/zYpaVWM Matthias Ott ????;????; No, you don’t! 🎉😁 codepen.io/matthiasott/pe… Chris ????; Browsers You need to put a selector before :has though. That means you need to know something about the parent. I guess you could do "*:has(> .my-class)" but that feels a bit horrible... Matthias Ott ????;????; These are the best days! 🙌😁 Chris ????; Browsers Interesting. Today I learned... :) Rafał; Grabie Top story: CSS :has( ) A Parent Selector Now · Matthias Ott – User Experience Designer matthiasott.com/notes/css-has-…, see more tweetedtimes.com/v/21215?s=tnp Focus Mobility Top story: CSS :has( ) A Parent Selector Now · Matthias Ott – User Experience Designer matthiasott.com/notes/css-has-…, see more tweetedtimes.com/helikopterdsgn… EJCSoftwareSolutions Top story: CSS :has( ) A Parent Selector Now · Matthias Ott – User Experience Designer matthiasott.com/notes/css-has-…, see more tweetedtimes.com/helikopterdsgn… Ben Schwarz I remember the days of float layout and in retrospect tables were better 🥹 Stefan Judis Such selector needs docs for sure. I'm just super fascinated by all the use cases it enables. 😲 In a few years we'll look back saying "Remember when we haven't had the :has() selector? That was tough!". Ben Schwarz And also, cool! Fun use of adjacent sibling, :checked & :has Matthias Ott ????;????; Yes, I totally agree! 😇 Ben Schwarz Real talk: selectors as complex as this require through documentation and are a total liability for a production codebase С;т;. 122 У;К; Р;Б; Е;щ;е; о;д;н;а; х;о;р;о;ш;а;я; п;о;д;б;о;р;к;а; п;о;л;е;з;н;ы;х; п;р;и;м;е;н;е;н;и;й; с;е;л;е;к;т;о;р;а; :has(), в;п;р;и;д;а;ч;у; к; css-live.ru/css/psevdoklas… :) ogi こ;れ;「;ド;エ;レ;ー; ;"cool" ;じ;ゃ;ん;・;・;・;・;？;」;た;だ;tailwindの;台;頭;で;CSS層;よ;り;も;HTMLを;太;ら;せ;る;の;が;metaと;い;う;感;じ;も;す;る;の;で;10年;早;く;欲;し;か;っ;た;ッ;ピ;（;無;茶;）; ????; meduz' All credits to @m_ott : Matthias Ott ????;????; Safari is the first browser to support it, yes. It will also be beging a flag in Chrome in the next version. And if you want to use it, you could check for support with a feature query like @;supports selector(:has(*)) Matthias Ott ????;????; That’s right, much better – thanks a lot! 🤗 Roger Troutman ????;????; The deployement is apparently for 2022 Matthias Ott ????;????; 🙈 Haha, you’re welcome, Stefan! 😉 silas ; Looks like nothing really :has support Matthias Ott ????;????; Thanks, Lauri! Glad it was helpful. 🙌 Lauri Lännenmäki Great article 👍 Stefan Judis There's good content like this brain-teasing selector in @m_ott article on CSS :has(). 👇👏 matthiasott.com/notes/css-has-… MATEO ZAPATA ; I love it Elise Safari apparently supports the :has() CSS selector, which opens up some interesting possibilities, aka real psychopath shit that I am sincerely excited about. James ????;️;????; Sadly Freddy Four Fingers® Nice! Rami I think it,s just at safari Rodrigo Pedra Brum For those on linux, GNOME Web (Epiphany), which uses WebKit under the hood, already has support for this new selector ;) Useful for seeing the demos and testing new code. Pablo Lara H ⚫;️; CSS :has( ) A Parent Selector Now by Matthias Ott @m_ott #has #css #Layout #PseudoClasses #Selectors #webdev matthiasott.com/notes/css-has-… T. Afif @ CSS Challenges I would suggest using `.grid:has( > :nth-child(n+4))` to avoid selecting non-direct child Save to Notion This Thread is Saved to your Notion Workspace. These tags were saved to the thread [Css, Selector, Has] Steven Koelma @SaveToNotion #thread #css #selector #has Stefan Judis Oh my... 🙈 That's a brain teaser! :D Thanks Matthias! 🙇♂;️; Soily Sound `grid-auto-flow: column` is probably a better way of achieving that last one… 45 Reposts jesterhead ????; Socialnif Jen Simmons Leobardo Óscar Alcántara Ocaña Hasan Wajahat Francesco La Macchia Sarah Elliot Shank ✶;✶;✶;✶; Samia PS ✨; Joey vinuraj varma Mozart Diniz Maxime Culea Ⓦ; kerasiotisme Tehes Nick Douglas Nico Xia Geoffrey Crofte ☕; AYU????; Werk 8 Design Charli the perfect crime Azharuddin ... NikolaySh4wn Lucas Floriani Arman Arif Diego Mox Arturo N ????; Л;е;ш;а; Aimee Front End Tweets Rodrigo Pedra Brum Design Mogul????; Huauauaa Jason Seonhong Kim GENKI ????; Sven Kretschmann Bramus Jermaine Dimitris Zotos Rob G ۪; ; graste v4.2 525 Likes Stephanie Eckles James Finley David Simpson Sieg nlb Markus Eicher Benjamin Aster Paul Andri Socialnif Daniel Díaz Darren Sorrels (He/him) Joshua Iz Modern Frontends Live! November 2022 - London James Campbell Fernando Mateus Schubidu Kadir ARIK votlen Numérique @ France Leobardo Óscar Alcántara Ocaña Touomi Willy Anthony Jeffery ????;????;????;????;????;????; ; Ghanashyam Sateesh Jason Miller ????;⚛; Ricardo Rodrigues Remco Tolsma Manuel Frick Eyal Eshet HZ.labs RajaSekhar K Dan Harris yz Yeunjoo Choi Mikael Tilly Hasan Wajahat Vasyl Zubach ????;????; Robert Ferentz nopoko Patrick Puritscher Abbas Arezoo Oxk4r01 Charli Niki ????;????; you Brian Coronel Ortiz Justus Kraft Maru ????;????; kibar ????; Gabriel Martin Corbo Santiago Santana Olivier Brückner AYU????; James Henrique Pereira Ros Peter Kliesch Pavel Klimashkin Chris Dunn-Birch georg Silvio Eckl HerrSchaefers Joana Carvalho Fede Lucas Hills Régis LUTTER kerasiotisme tony(nho) jailandrade Agustín Díaz Matthias Weston Beth Alessi ᴅ;ᴀ;ɴ;ɴ;ʏ;.css Tehes Stephanie Eckles Werk 8 Design Will scotther 3 by shigesato itoi Alex Fuentes Henryhank Ju Bouyer EGGSY (Abdulbaki Dursun) Bruno CHIREZ Nicolas Zamarreno Ravi Gehlot Lennart Kerkvliet Nico Xia Jeison Sang Wu Mitre Micah Ilbery M'sieur Ari marina abramovic's personal shopper Claudio Rimann Abdelghafour ????;????; rincon paciência Bill M Moore Tyler Marés Ada Powers Francesco La Macchia Julien Lopinto Julio Farah Stuart Lambon Steve Murphy (he/him) Vincent Bidaux Kayhan Atamyildiz Sarah Impulse Webdesign thomas villain Saúl Rodríguez Ryan Jack ????; Derya emirhan akpı;nar Juan Carlos S. Durga prasad Joel Berger Mozart Diniz Higemura | ム;ダ;毛;の;化;身; Keystion Navid Shahnama Dr. Kate Holterhoff Manic Pixie Dream NB ✨;????;✨; Darice de Cuba Marian Jess N ℤ;????;????; ????;????;????;????;????;????; Time for Ranked-Choice Voting - Christine_G Cassidy James Blaede Leif-Jöran Olsson Pedro Guido Slotboom Hamzah Aziezs Neeraj Singh Chris Johnson rommyarb ????; M͆;i͆;c͆;h͆;a͆;e͆;l͆; Yomo 4M vinuraj varma Liam Jay D7460N Zach ????; Víctor Sánchez clay ????;????;????;????;????;????;????;????;????; TIM TERRY Mateo Catry Ewilan R. DG insane in the head /pos Steve Hanna I_sidora Lyosha87 Samuel Hauser ✨; Joey Eran Kinsbruner Greg Stone Chris Heaney Guillaume Turpin barthelemy.ehui Maxime Culea Ⓦ; Lauchita. Christopher ????; Starr Chen Frank "Mottokrosh" Reding josie????; mrweb (.fr) Charul Dalvi マ;ッ;ト; Samia PS Rasuwan Kalhara Iván Villamil Covián Abdallatif Sulaiman Joyanna Hirst Jose Cordova ????; Luca Iaconelli ????; Paolo ✌;????; Tarunnnnnnnnn Jencansee! Joe Fertig (????;,????;) Cobby Pedro Costa Kerem Dinçer Eduardo Leal Ross Luebe Pedro Muñoz Alvear ????;????;????;????; Sunny Vakil Bandar ????;????; ب;ن;د;ر; angel ????;????;????;????;????; ????;????;????;????;????;????;????;????; Thomas bill0x2a.eth Benigno H Raimonds ????;????; ????;????; ????;????; Bastien Labelle Bharat Mandava Manuel Casas cory hughart .com Manish Karki falel tatata喵;喵;喵; И;г;о;р;я;н; Volodymyr Lisniak Gavin Chua Antonio RS ????;️; Muhammad Bilal Tyler Jones Alberto Silva Sherri Booher Chim Dante C. Nicolas Le Roux Percy valentino ????; Ramon Cordini J.A. Whittington Anton Tursenev Dana Rocha Leo Demian Tatay Jess Peck ????;????; Nicolas Frette ブ;ラ;ッ;ク;く;ん; Paul Hernández Scorp974 Son Of ONI????;????; Jeremias++ on a mission to civilize TheAppleFreak •_• Fehrenbach Baptiste Marco Ferreira gori Zach ????;️;????; $ivi Miriam Jakub Beránek Mathieu D. this is Marvin Bruns Franco Gilio Gilbert Erin????;????;????; KHOAT BUI Drasko Stikovac Lewis Newton Morgan Franz Heidl akihiko.KIgure Rafael Calvo ????;+⚔;️; xmanilovechina Bill Samuel's paul soliz triveño Ronny Piotrek Andreas Koutsoukos Fabien Motte Henrique Terceiro Héðinn Mirko Nerdjfpb: Muhammad The Bug King Jordi Aliberas Ted Lin Léo Bernard Igor O. stephen burke Jonny Vaine Rafael Silveira П;р;о;в;и;н;ц;и;а;л;ь;н;о;е; р;а;д;и;о; / Gabriel Thiffault 毛;的; ????; Prabin Poudel Bart Meinders Ruud Luijten Osiris Meza Carlos Iglesias А;л;е;к;с;а;н;д;р; Christopher Sekhar Babu ح;د;ا;د; ب;ط;ل; أ;ف;ر;ي;ق;ي;ا;????;????; Matteo Collina Joseph Rex た;み;お;ん;！;▶;︎;Web制;作;の;ス;キ;ル;を;言;語;化; Usman Shahid Gil Mendes Nir Zohar Abdón Miguel Víñez Chaves Zach Schnackel Ahmed Mahmoud Wayne Patterson plural killer joel_lesenne Nikita Kirsanov Lucas Yuki。;'22 Pedro LiamOSullivan Pablo Sirera Bruno Stasse long figs mccready ripleyaeryn Robert Spier Julien De Luca Ayobami テ;ｲ;ノ;く;ん; Paul Herron け;ん;と; Marvin ????; Write My Paper Benny Powers ????;????; ب;ي;ن;ي; ب;ا;و;ر;ز; ????;????; ב;נ;י; פ;א;ו;ו;ר;ס; Fabián Gambetta No name Robert Koritnik Daniel Del Code Maarten Tibau ????;????; Sir Gismo Martin Carlin mark claxton Oconely Neil Stewart Orr Agus Muhammad Mertcan Köse audora ????;✨; Diego Ballesteros Rhaladriel Brooke Grahame Thomson ????;????; Brian Prosnitz mixfuckedup! Jonathan Hart Ya no sirvo Dmitry Deniz Erisen Nilay Macwan ????;????;????; Martijn de Valk Paolo Spagnuolo Günter Zöchbauer freelance Angular, Flutter, Rust Casper the Unfriendly Ghost Adam yakubu Aytaç İ;brahim TUNÇ Pooya Badiee Insalubriouslugubrious Stephen Brown-Bourne Andrew Johnson Jan Schölch ????; Jack ????;????; nate burak mkalina mimmy????; ????;????; Serge B. Luke Taylor Brian Moreno ????;????; Rodrigo Moreno Karin - ????; Plaaaaaants Mathieu Jouhet Beberpop Isaac Javier Cáceres Hewon Jeong Д;м;и;т;р;и;й; Х;о;м;я;к;о;в; Andrés gonca Dennis Morello ????;????;????; JS / React ⚛;️; Nitin Jadon Subhash G komiks Mattia Astorino ujkem Patrick Smith The Wicked Killah David Wittenbrink Roman Koloda Federico Gandellini Faizaan Maximilian Franzke Asheer Rizvi Elaine Wong Erik Hofer RH♠️; Kilian Valkhof rogueyoshi.com/coaching Andy Smith irgendwasmitcomputern Felipe Ossandon ????; Giulia Pellegrini Andrzej Stacherski Sal Rahman Danny Koppenhagen Christiaan Hemerik ????;????; Paloma Simões Alexander Lubomír Blaž;ek Gaël Poupard rong-sen Leo Keo Jesse Kinsman А;л;е;к;с; ぶ;っ;ち;ぃ; Г;е;н;н;а;д;и;й; У;д;а;л;ь;ц;о;в; MARS limbo Mohammad Rahmani sendilkumarn Alex ????; ๓;ค;ค;r tē;ຖ; ????; | ????;????;????;????; | ????;????; | ????; | ????; Mox Design Mogul????; Luan Felipe Barbosa Hussnain Fareed Daniel Medina Núñez ????;Arv!nd Kumar Freddy Four Fingers® Janid Ham daniel Manaia Junior ⚡;️; HitBox | Punisher Angelito ????; Diego minnie23 lemon GHOST pitiloku Vipin Kumar Dinkar marcos Léna Robin kitajchuk Jacob M-G Evans ⚛;????; TAK Robin Neal monster860 Arie M. Prasetyo ????; ryufjk Oliver Farrell Rodrigo Noales ????; ????; - A.k.a. SonicByte Andrew Lenards Johan Li Plabo Yisus Castro✨; Jarret O'Shea Zeeshan Rafael Pelicioni Rodrigo Pedra Brum Oguzhan İ;nce Osmani Hernández Pérez Chelsea8999 Julien He ????;????; Frontendɾ; Shut Up Kodi Grunet Santiago Mejía B Appgaga Vernon Fowler Pascal Aimee Mike Morearty Jamos Héctor Mendoza Ishida Cheung It's an Old Fashioned take Lord Rocha Ott Tooming Ritika Agrawal Josh Humble Denner Luan Vinay Mahdi Farra ????; Daniel Leite Mohamed Tag Deny Herianto ????; Л;е;ш;а; GENKI ????; David Lewis LoveJ Dave Patrick Ofer Shaal Wiz Mayara Pimentel Kara Luton ????;????;????;????; Smakosh 东;风;异;客; Ajmal_shk Peterson Cordeiro nusu RusoCucu Steven Beshensky Jens Grochtdreis Ana Rodrigues Kyle Kramer Shaun Levett fsenel.eth ⚛;️; hiro Rafael Camargo Dimitris Zotos Clément Galidie Thomas ????; Pascal Baljet ????; Florian Bouvot ????;☠;️;????; Josh DeGraw Richard Cool Yanuar Wanda Putra ş;fb T. Afif @ CSS Challenges Tim Coomar Paweł; Lesiecki Braux Martinez Stefan Brett Ritter Tibor Paulsch Nikki Adam Argyle Rob G AlaaMU Sven Kretschmann Marc Friederich Jens Drößiger Jermaine Johan Ronsse Bardia ⠕; graste v4.2 mundi ۪; ; ⓘ Webmentions are a way to notify other websites when you link to them, and to receive notifications when others link to you. Learn more about Webmentions. Have you published a response to this? Send me a webmention by letting me know the URL. Ping! More Notes Ad Infinitum Lazy and Prompt Buckle Up At Machine Speed
COMMENTSENSE CSS :has( ) A Parent Selector Now · Matthias Ott – User Experience Designer matthiasott.com/notes/css-has-…
İ;lker Kurtel 1- webkit.org/blog/13096/css… 2- css-irl.info/animated-grid-… 3- matthiasott.com/notes/css-has-… 4- daverupert.com/2022/07/solvin… 5- css-tricks.com/the-css-has-se… 6- blog.logrocket.com/advanced-guide… 7- developer.chrome.com/blog/has-m105/ 8- bram.us/2021/12/21/the…
Matthias Ott Also added it to the list of resources at the bottom of my :has() article from earlier this year: matthiasott.com/notes/css-has-…
Helen i:not(:has(time)) but still excited for when this pseudo-selector gets more support! A helpful/hype article about this matthiasott.com/notes/css-has-… @m_ott via @CodePen
Jorge Luiz Every day the CSS world has presented steady improments. Have a look at the article bellow: matthiasott.com/notes/css-has-…
Matthias Ott Yes, that’s true, I would not use it for anything super critical at the moment. But it’s on the horizon (also in Chrome), so I already started adding it here and there for little (progressive) enhancements. 🤫😜
Michael Bladowski #CSS :has( ) A Parent Selector Now · Matthias Ott – User Experience Designer matthiasott.com/notes/css-has-…
Lukas Borawski Finally, :has has arrived 😃 #css #web #dev #programming matthiasott.com/notes/css-has-…
Ashraf Hamdy This is quite interesting! CSS :has( ) A Parent Selector Now, by @m_ott matthiasott.com/notes/css-has-…
Marco Von Ballmoos CSS :has( ) A Parent Selector Now · Matthias Ott – User Experience Designer matthiasott.com/notes/css-has-… via @instapaper
Sergey Romanenko Matthias Ott explains how the :has() selector works and shows how it's not only useful as a parent selector. matthiasott.com/notes/css-has-… #css
Yohan J. Rodríguez #CSS #Automated | CSS :has() A Parent Selector Now matthiasott.com/notes/css-has-…
MJCoder #CSS :has( ) A Parent Selector Now · Matthias Ott – User Experience Designer matthiasott.com/notes/css-has-… by @m_ott
я;є;αℓ;ιѕ;т; נ;ανѕ;т;αн; #CSS :has( ) A Parent Selector Now, by @m_ott matthiasott.com/notes/css-has-…
Lazy McGrady nah this is dope CSS :has( ) A Parent Selector Now, by @m_ott matthiasott.com/notes/css-has-…
Kat Fay Here's a really helpful explanation of new the :has() #CSS selector by @m_ott 🙏🏻 Explained so that #CodeNewbies like me 🌱 can understand, it also goes into detail for the #webdesign experts out there 🧙🏻♂;️; ⌨;️; CSS :has( ) A Parent Selector Now, by @m_ott matthiasott.com/notes/css-has-…
dailydevlinks. 📝 CSS :has( ) A Parent Selector Now 🔗 matthiasott.com/notes/css-has-… #html #css #javascript #webdev
Mengxi Lu We were promised flying cars, and we got something very close. :has( ) has arrived. matthiasott.com/notes/css-has-…
Chiyana Simões ; CSS :has( ) A Parent Selector Now · Matthias Ott – User Experience Designer matthiasott.com/notes/css-has-…
nuncapops CSS :has( ) A Parent Selector Now · Matthias Ott – User Experience Designer matthiasott.com/notes/css-has-…
Jacky CSS :has( ) A Parent Selector Now · Matthias Ott – User Experience Designer matthiasott.com/notes/css-has-…
Muhammad Hameed Sarwar matthiasott.com/notes/css-has-… #frontenddevelopment #twitter #CSS #softwaredevelopment #stylingtips #frontenddeveloper #softwareengineering #css
Pinboard Popular CSS :has( ) A Parent Selector Now · Matthias Ott – User Experience Designer matthiasott.com/notes/css-has-…
倪;爽; CSS 开;始;支;持;父;选;择;器;了; 我;们;一;直;都;被;教;育;：;CSS 不;能;直;接;定;义;父;级;元;素;，;这;么;定;义;等;于;把;渲;染;完;的;元;素;重;新;渲;染;，;会;慢;死; 结;果;苹;果; Safari 开;始;支;持; :has() 伪;类;，;能;不;降;低;页;面;速;度;地;实;现;父;选;择;器;，;据;说;他;们;找;到;了;高;度;优;化;性;能;的;方;法; 这;位;设;...
Rodrigo Noales ????; ????; - A.k.a. SonicByte Can't wait to test this... CSS :has( ) A Parent Selector Now, by @m_ott matthiasott.com/notes/css-has-… #css
dirk döring article:has(.value) by @m_ott matthiasott.com/notes/css-has-… CSS :has( ) A Parent Selector Now, by @m_ott matthiasott.com/notes/css-has-…
Ferdinand Vogler This is great. So everytime I’m using a modifier class such as .button—has-icon I can now use .button:has(.icon). Reduces some code 🙂 Thanks for the article.
Fatih Hayrioğ;lu CSS Parent seçicisini(:has) örnekler anlatan güzel bir makale. Parent uzun süredir beklediğ;imiz bir yetenekti. Gelince biraz duraksadı;k ama örnekleri gördükçe heyecanlanı;yorum.🎉 CSS :has( ) A Parent Selector Now · Matthias Ott – User Experience Designer matthiasott.com/notes/css-has-…
Quentin Bellanger ":has()" parent selector will unlock so many possibilities and reduce the amount of code! #css matthiasott.com/notes/css-has-…
Pawel Grzybek "CSS :has( ) A Parent Selector Now" by @m_ott is so good. Bunch of practical examples of :has() pseudo-class + tons of CodePens. matthiasott.com/notes/css-has-… #css
Šime (she-meh) ????; I thought form:has(:nth-child(3 of :checked)) would work in Safari, but it doesn’t for some reason.
Jakub T. Jankiewicz Hej @Comandeer2 obczaj swój komentarz na moim blogu z 2018. jcubic.pl/2018/04/selekt…
Joel Berger Browsers may not have had the #css4 selector ":has" until now, but @mojolicious_org has had it for years! docs.mojolicious.org/Mojo/DOM/CSS#E…
D7460N I really liked this, check it out : ✨;✍;️; New post: CSS :has( ) A Parent Selector Now matthiasott.com/notes/css-has-… — Matthias Ott 🇺🇦 (@m_ott) Apr 10, 2022
ng-gunma CSS :has( ) A Parent Selector Now · Matthias Ott – User Experience Designer matthiasott.com/notes/css-has-…
Matthias Ott ????;????; Yes, sure! I also mention this in the article. You could use a feature query to check for support if it makes sense to use it in a project already.
Mylo apparently chrome has added it now, but i wouldn't immediately start using it everywhere. edge and firefox are widely used still
Matthias Ott ????;????; Oh, yes! You could try it in Safari TP and write about it / create a CodePen demo. 😉😉😉 webkit.org/blog/12563/rel…
Dennis Frank Yeah! It's so easy now to add a bit of custom theming. Speaking of theming: Simple theme switch with :has() codepen.io/df/pen/MWrBWbO
Digital Art Creative Top story: CSS :has( ) A Parent Selector Now · Matthias Ott – User Experience Designer matthiasott.com/notes/css-has-…, see more tweetedtimes.com/helikopterdsgn…
Matthias Ott ????;????; 🤔 In “set these styles on the parent of this element”, “this element” needs to be selected via CSS, correct? E.g. ".my-class". If you then use :has(> .my-class) { … } you’re selecting the parent of this element without the need to know the HTML structure.
Matthias Ott ????;????; I’d argue that there are other, much more efficient ways to improve performance (👀, JavaScript) than to optimize for selector performance. The differences are negligible, even * is not a problem anymore – although it would be interesting to see if this is different for :has… 🤔
Chris ????; Browsers I don't think "set these styles on this element if it contains these children" is the same as a parent selector. A parent selector would be "set these styles on the parent of this element". The important bit is that a parent selector doesn't need to know the HTML structure.
George aka Gplus Web Thank you for the write-up, but I'd like to point out : most of these examples seem very inefficient selectors. What's the problem with adapting your HTML to suit your styling needs? Definitely more performant
Dennis Frank CAN I HAS :HAS? Another use case I just prototyped: Style select based on option value codepen.io/df/pen/zYpaVWM
Chris ????; Browsers You need to put a selector before :has though. That means you need to know something about the parent. I guess you could do "*:has(> .my-class)" but that feels a bit horrible...
Rafał; Grabie Top story: CSS :has( ) A Parent Selector Now · Matthias Ott – User Experience Designer matthiasott.com/notes/css-has-…, see more tweetedtimes.com/v/21215?s=tnp
Focus Mobility Top story: CSS :has( ) A Parent Selector Now · Matthias Ott – User Experience Designer matthiasott.com/notes/css-has-…, see more tweetedtimes.com/helikopterdsgn…
EJCSoftwareSolutions Top story: CSS :has( ) A Parent Selector Now · Matthias Ott – User Experience Designer matthiasott.com/notes/css-has-…, see more tweetedtimes.com/helikopterdsgn…
Stefan Judis Such selector needs docs for sure. I'm just super fascinated by all the use cases it enables. 😲 In a few years we'll look back saying "Remember when we haven't had the :has() selector? That was tough!".
Ben Schwarz Real talk: selectors as complex as this require through documentation and are a total liability for a production codebase
С;т;. 122 У;К; Р;Б; Е;щ;е; о;д;н;а; х;о;р;о;ш;а;я; п;о;д;б;о;р;к;а; п;о;л;е;з;н;ы;х; п;р;и;м;е;н;е;н;и;й; с;е;л;е;к;т;о;р;а; :has(), в;п;р;и;д;а;ч;у; к; css-live.ru/css/psevdoklas… :)
ogi こ;れ;「;ド;エ;レ;ー; ;"cool" ;じ;ゃ;ん;・;・;・;・;？;」;た;だ;tailwindの;台;頭;で;CSS層;よ;り;も;HTMLを;太;ら;せ;る;の;が;metaと;い;う;感;じ;も;す;る;の;で;10年;早;く;欲;し;か;っ;た;ッ;ピ;（;無;茶;）;
Matthias Ott ????;????; Safari is the first browser to support it, yes. It will also be beging a flag in Chrome in the next version. And if you want to use it, you could check for support with a feature query like @;supports selector(:has(*))
Stefan Judis There's good content like this brain-teasing selector in @m_ott article on CSS :has(). 👇👏 matthiasott.com/notes/css-has-…
Elise Safari apparently supports the :has() CSS selector, which opens up some interesting possibilities, aka real psychopath shit that I am sincerely excited about.
Rodrigo Pedra Brum For those on linux, GNOME Web (Epiphany), which uses WebKit under the hood, already has support for this new selector ;) Useful for seeing the demos and testing new code.
Pablo Lara H ⚫;️; CSS :has( ) A Parent Selector Now by Matthias Ott @m_ott #has #css #Layout #PseudoClasses #Selectors #webdev matthiasott.com/notes/css-has-…
T. Afif @ CSS Challenges I would suggest using `.grid:has( > :nth-child(n+4))` to avoid selecting non-direct child
Save to Notion This Thread is Saved to your Notion Workspace. These tags were saved to the thread [Css, Selector, Has]
