Interesting...I came here thinking that the :has selector was the one I needed to solve a particular problem, but it turned out to be :is instead. Your description was spot on, and it did the trick perfectly. Thanks for the comprehensive coverage!
This is the first time I have heard that ID and class can not start with a number. Love how one can learn small and big things in your videos. And this is, where, has are really handy and I love that these are now more supported. Hope that WordPress theme makers also start using these.
Like in many languages, they don't like symbols beginning with a digit! That ain't possible in JS too for example. Parsers see a digit, they expect to see a number, and if a number was not expected here, syntax error. The main reason it's not possible is that it's often ambiguous syntax because if it was possible, you may or may not attempt to refer to a variable, for example in C# if variables starting with a digit were supported, if you type "var a = 1d", do you refer to an hypothetical variable "1d" or number 1 typed as a double? Or in JS, did you make a typo when writing your number or did you attempt to refer to a variable name? Even simpler, what would "123" referring to as the right-hand side? Even if you'd want to support it anyway, this would require more backtracking from the parser, a more complex grammar overrall and a clunky symbol resolution logic, which are all performance killers.
@@favourz1 Okay, so... I'm going to use some markdown here, though I know it doesn't work in TH-cam comments. Just imagine it does lol The first number is the amount of IDs in the selector. So both `#thisisanID` and `div:first-of-type .selector #thisisanID` have a 1 for the first number. This always wins out regardless of any other number. A selector with more IDs will always win out against a selector with less. The second number is the amount of attribute selectors, class names, and pseudo-classes in the selector. So `:root section .class1 .class2` and `li:first-of-type p.paragraph a[href*="apple"]` both have 3. If a selector has the same amount for the ID number then this Class amount will be used instead. The final number is the Type number. This includes any selector that uses just elements and pseudo-elements in the selector. So `section div a::before` and `header h1 p span` both have 4. Note, pseudo-elements count as one separate from the element they are attached to. So `div::before` counts as 2. This number is only used if the ID amount and the Class amount are equal to each other. There's exceptions and special cases, specifically for pseudo-classes mentioned in this video but I don't want this comment to turn into an entire essay. I'd suggest looking at the MDN page about specificity: developer.mozilla.org/en-US/docs/Web/CSS/Specificity It would be quite excellent if Kevin could make a video about this. Specificity is one of the more difficult to understand aspects of CSS and I know a lot of people have trouble with it.
Sweet!!! I did not know that you could prioritize CSS instructions with !important until this video. So nice it helped me fix an issue I was having on my site I am designing for learning. Thank you!
the has selector will chage my life!! I don't know how many times I've eather repeated something like marigin: 1rem; or given it another selecter eaven when the css has basically been the same css
:has() is more powerful than any other 🤩, but as a web developer I am disappointed that its still not supported in Firefox, which makes me not to use these in my projects 😮💨
Yeah that's very strange. All the other browsers support it, it's not very Firefox-ish to not be up to date. Kevin, if you read this, i think you should consider making a note about this in the video.
@@månemannmånemann FF latest version supports it with a config setting change, so hopefully this means that full support is coming soon. We can’t really fully make use of it until it’s supported by all modern browsers.
I think the where pseudo class would be best used for css libraries/frameworks because than it would be easier to change styling, also the file size of a css library/framework will become smaller. only issue would be backwards compatibility but maybe for that "@support selector" could be used to import a compatible version
Yes good call. I had an issue lately that would have been solved with has() on a menu. In the end it was fixed with js. A css solution like this would have been so much better
The :has() drastically improved the handling of custom properties for me. Normally they only trickle down the tree, but :has() effectively lets me set values higher up!
This new pseudo class is amazing and help me a lot. I am developing tailwindcss where people can use component and they can choose any available preset. For example when we choose bootstrap preset then the entire component will have look like bootstrap, if they choose mantie then the component will have mantine like style. The problem is I want user can override the style from config. This :where pseudo-classes is solve this problem elegantly
That's why I like your videos because I don't really use the :is() selector I didn't know about that blind spot... still hoping for a line-height video.
I build design systems and :where is great for making default styles, so that things have styling like default, but that styling can be overridden like in a headless component
Hi Kevin! Thanks again for the amazing content. Can I request a video on specificity and how it works? The docs are pretty useful, but... you explain things (so amazingly) in a way that I actually can conceptualize and remember.
:has() is awesome! I wonder why they haven't simply flipped the descendant selector though, i.e. .example-3 < img The specificity of :is() and :where() seems more confusing than helpful? Thanks for the overview and comparison!
05:10 Why, just why? Why does selecting a general tag type is more specific than selecting a class... Why do they make such strange non-intuitive exceptions all the time? What exact purpose does this special rule serve? :has looks really useful indeed.
Thank you for the video, :has() is amazing. Can you explain the benefits of specificity and do you think that it fixes more than the issues it causes? I personally hate specificity in CSS, I don't see it being worth the trouble it causes.
You can use something like BEM to make it easier to style what you want, specificity is great to be sure you aren't making any mistakes, if it's bothering you, probably you are doing something wrong
Can't wait until Firefox:has(support)! It's gonna be nice to be able to start using that more often. Anyone have an idea of when they plan on releasing that beyond experimental?
I love your videos. They are so interesting!! But please, darken your intro. Changing for your dark-themed websites to your pure white intro is quite painful haha...
Hi Kevin, I am pretty excited with the :has selector. Quick question. Does it mean that we can actually use it to apply different templates based on what we are rendering inside? Do you find it a good idea? Great video man, and keep the camera on, it makes it all personal !
Would it be a good idea to use a mixture of "duplication" and ":is", like so: .example-1 :is(h3, h4, a), .example-1 :is(.link, .something) { color: red; } Would that solve the specificity quirk and assign h3/h4/a different specificity than .link/.something, or does using :is anywhere "infest" the whole ruleset?
That hierarchy point could cause some real problems. Looks like if you use is() you have to use it throughout the css. Not entirely sure I’m on board with it. The previous listed method works well and is clear to read
Now I want to write a regular expression to replace selector lists like *_example-1 h1, example-1 p, example-1 li_* to use is() instead. /, {classname} (tagname) /is($1)/ or something like that, roughly.
Thank you so much for these amazing videos Mr. Kevin. I am a little confused about these CSS frameworks, tailwind CSS and Bootstrap. so I want to ask you which one should I select to work with as a front-end developer in a company ? or should I continue with plain CSS ?
problem is I can't club :has() with :first-of-type(). Which means I can't apply style to the same element after checking if it has a child or not. Its so disappointing tbh
Hey, I don't know the best way to reach you but I hope you see this. I like using tailwindcss for my development. If you have ever used it or have knowledge, could you do a video explaining your thoughts and opinions about using the framework?
Thank for the video! Can you make a video of CSS inside the SVG, do :IS(); , :WHERE; and :HAS; work inside SVG? I thing it should but I'm too new in to this. It's there any channel that explains things like you but with JavaScript? I wish to add a tool tip that appears when I hover over a particular svg path.
What about backward compatibility? Won't this break the styling on machines that have older browsers? I'm thinking of Mac's that don't allow browser updates anymore due to withdrawn OS support. Also some Android phones have this stagnating OS / browser problem. I'm guessing we're just ignoring this segment of the user base. ^^;; This wouldn't be advisable for archival sites.
It's a concern, and requires that you know the analytics for your audience. :has() definitely is a little low on support still. :Is() and :where() are surprisingly well supported though.
Good video, thank you! I think the :is() is not a big hit. Instead of multiple lines, the tags are given in brackets. OK, not much progress in one eyes. One point, though, is "forgive" the typo, good thing. However, I don't understand why the specificity of :is() is given a higher value. This is just confusing.
:has() should be called what it really is, a conditional selector/rule. It is even easier to explain as that. The rule only works if the condition inside is met.
Hello, please, I have a question. I am new to the front end field, and I can make simple websites. I found your channel. It's great. What do you advise me to start with your channel? Where do I start to develop myself? Thank you
Looks like it might well be coming to Firefox soon. In version 103 you can set a config to enable it. Hopefully this means they are testing it out in the field.
Is it also possible to combine :has and :not? For example: If an link in my nav does have the class of fancy. Do this to all the others. And if the class fancy is not there, don't apply any style to the others.
I don't understand how Mozilla is handling this. IS this going to be in all Browsers? Or does Mozilla say "no" for some reason? (....because they have it, but you have to activate it first - why?)
i want to ask: does this mean we can finally group vendor specific pseudo-elements/classes into one rule set using :is()? i cant figure it out myself and dont see answears anywhere lol
.main-content > :where(h1, h2, h3, .heading, .title) { text-transform: uppercase; } - The advantage here is two fold. First, instead of having 5 selectors (like, .main-content > h1, .main-content > h2, etc), we can have one selector, and second, it keeps the specificity 0,1,0, since anything inside the :where() doesn't count towards specificity. If we did that with :is(), it would have a specificity of 0,2,0. Maybe in this case that's not a big deal, but sometimes it's *really* handy to keep specificity low.
You are wrong about 1 thing. You can use number for classes and ids. Just that you need to convert the name to utf8. So for example. If you have a div with class "1test". The css selector needs to be ".\31\74\65\73\74 { css code here }". You could even use just a dot as a class name. Not saying you should, but it is possible
With CSS, they very, very rarely change an existing behavior. This probably wouldn't have negative consequences but with most things, a changé could potentially break older sites, so in general, things stay as they are.
CSS is pushing out awesome features very quickly over the recent years, making the currently bloated frontend development a lot easier. Remember when we had to give odd and even Classes to elements to target them?
Awesome topic, and I love CSS so much, especially with how it's been going so fast lately. That brings me to a trend I really find shameful and damaging to CSS: many developers I run into nowadays switch to Tailwind. Usually, people who only barely or have a very basic understanding of CSS and think they know it all. I hate that "framework" with the passion of a million suns. It's like reading a book without any punctuation or linebreaks. "We shall just dump 30+ utility classes in one line of code YOLO" - they tend to be people who DON'T know CSS. They'll say they do, because they know some CSS basics, but I can make them feel perfectly inadequate in less than 5 minutes.
Kevin Powell :is(.the-best) :where(.code) :has(.HTML, .CSS)
Well, had you written the parentheses' contents as classes, you could also say he's classy, too. :)
!important;
...not compatible with roughly 20% seeing this, but his support is improving.
I think this is the best use-case of where and is pseudo-classes
```
.example-1:where(.link) :is(:focus, :hover) {
color:red;
}
```
Not bad... 👍
The :has() is simply amazing, one of the most powerful pseudo-classes, combining it with :is(), :not() and so on is really a game changer
Thank you for all your videos! You show us all the best things about CSS and its helped me make my Developer Portfolio look so great!
Interesting...I came here thinking that the :has selector was the one I needed to solve a particular problem, but it turned out to be :is instead. Your description was spot on, and it did the trick perfectly. Thanks for the comprehensive coverage!
This is the first time I have heard that ID and class can not start with a number. Love how one can learn small and big things in your videos. And this is, where, has are really handy and I love that these are now more supported. Hope that WordPress theme makers also start using these.
Found this out myself by trying it once. The fact that you didn't know just shows how useless it would be anyway lol.
Like in many languages, they don't like symbols beginning with a digit! That ain't possible in JS too for example.
Parsers see a digit, they expect to see a number, and if a number was not expected here, syntax error. The main reason it's not possible is that it's often ambiguous syntax because if it was possible, you may or may not attempt to refer to a variable, for example in C# if variables starting with a digit were supported, if you type "var a = 1d", do you refer to an hypothetical variable "1d" or number 1 typed as a double? Or in JS, did you make a typo when writing your number or did you attempt to refer to a variable name? Even simpler, what would "123" referring to as the right-hand side?
Even if you'd want to support it anyway, this would require more backtracking from the parser, a more complex grammar overrall and a clunky symbol resolution logic, which are all performance killers.
Protip: In VS Code, when hovered over a selector in CSS, it will show the specificity. E.g. (0, 1, 1)
That's huge - Im tired of !important tags for overiding classes.
@Doston can you also explain how to read that? (0, 1, 1,) Does it mean it has 0 specificity? then what is 1 for?
Same question here
@@favourz1 Okay, so... I'm going to use some markdown here, though I know it doesn't work in TH-cam comments. Just imagine it does lol
The first number is the amount of IDs in the selector. So both `#thisisanID` and `div:first-of-type .selector #thisisanID` have a 1 for the first number. This always wins out regardless of any other number. A selector with more IDs will always win out against a selector with less.
The second number is the amount of attribute selectors, class names, and pseudo-classes in the selector. So `:root section .class1 .class2` and `li:first-of-type p.paragraph a[href*="apple"]` both have 3. If a selector has the same amount for the ID number then this Class amount will be used instead.
The final number is the Type number. This includes any selector that uses just elements and pseudo-elements in the selector. So `section div a::before` and `header h1 p span` both have 4. Note, pseudo-elements count as one separate from the element they are attached to. So `div::before` counts as 2. This number is only used if the ID amount and the Class amount are equal to each other.
There's exceptions and special cases, specifically for pseudo-classes mentioned in this video but I don't want this comment to turn into an entire essay. I'd suggest looking at the MDN page about specificity: developer.mozilla.org/en-US/docs/Web/CSS/Specificity
It would be quite excellent if Kevin could make a video about this. Specificity is one of the more difficult to understand aspects of CSS and I know a lot of people have trouble with it.
@@woedenaz7850 Wow i really do appreciate your time for explaining. It was so detailed. Thanks Once again!
Sweet!!! I did not know that you could prioritize CSS instructions with !important until this video. So nice it helped me fix an issue I was having on my site I am designing for learning. Thank you!
the has selector will chage my life!! I don't know how many times I've eather repeated something like marigin: 1rem; or given it another selecter eaven when the css has basically been the same css
I watched this three months ago before I knew what any of this was... Now I've finally caught up and am putting these into action. Thanks!
Super clear tutorial thank you !
Wow, cool stuff and nice explained, thank you Kevin
Another great video, Mr. Powell.👌🏾
Kelvin you are the best. Thanks for helping me understand how them selectors work
:has() is more powerful than any other 🤩, but as a web developer I am disappointed that its still not supported in Firefox, which makes me not to use these in my projects 😮💨
agreed. I wonder why Firefox wasn't still able to support this. Hope they will catch up soon this :has() utility is really powerful
This is key. It needs to have 99% support before we can use it on professional projects. It will happen though
Yeah that's very strange. All the other browsers support it, it's not very Firefox-ish to not be up to date. Kevin, if you read this, i think you should consider making a note about this in the video.
@@månemannmånemann FF latest version supports it with a config setting change, so hopefully this means that full support is coming soon. We can’t really fully make use of it until it’s supported by all modern browsers.
@@a1white nice
Something is magical about how you pronounce "specificity", its oddly entertaining:)
Thank you for video, very nice and simple explanations.
I think the where pseudo class would be best used for css libraries/frameworks because than it would be easier to change styling, also the file size of a css library/framework will become smaller. only issue would be backwards compatibility but maybe for that "@support selector" could be used to import a compatible version
this is a game changer, im foolishly trying to create my own css framework and this has been useful for creating specific components of it
thank you so much sir..its really helpful
Great info - thanks. I wish I'd had those selectors (particularly :has()) years ago.
Thanks Kevin for sharing wonderful concept in css.
I love your videos!! and i love css!
Great overview. Really looking forward to using :has.
Excellent explanations 😊Thank you
This video is so good. I learned so much from it. Thank you so much!
dude :has() has been soosooo helpful as of late and there was one thing where :is() will save me tons of codee haha
Thanks for the content, keep it up!
Honestly :has() is such a great pseudo class! I started using it in every project.
Loving the :has one already
My man! The best! ❤️
You said specificity so many times - and nailed them all! 🤘
I can imagine :has being useful for navigation menu hierarchy. Very cool!
Yes good call. I had an issue lately that would have been solved with has() on a menu. In the end it was fixed with js. A css solution like this would have been so much better
The :has() drastically improved the handling of custom properties for me. Normally they only trickle down the tree, but :has() effectively lets me set values higher up!
Thanks! Your videos help a lot😀
This new pseudo class is amazing and help me a lot. I am developing tailwindcss where people can use component and they can choose any available preset. For example when we choose bootstrap preset then the entire component will have look like bootstrap, if they choose mantie then the component will have mantine like style. The problem is I want user can override the style from config. This :where pseudo-classes is solve this problem elegantly
exellent, thank you ! amazing how it changing
Really helpful 🎉❤
Awesome topic! ❤
Thanks, Kevin!
Damn the specificity is a mindcluster
Hi Kevin, I am looking forward to seeing your beyondcss course being released as soon as posible.
That's why I like your videos because I don't really use the :is() selector I didn't know about that blind spot... still hoping for a line-height video.
They grow so fast, I cannot keep up!
I build design systems and :where is great for making default styles, so that things have styling like default, but that styling can be overridden like in a headless component
Awesome!
I wanted something like :has() for so long, oh my. Here's hoping it gets better support soon!
very good video, thanks for sharing!
Sir Thank you very much 😊
Hi Kevin! Thanks again for the amazing content.
Can I request a video on specificity and how it works? The docs are pretty useful, but... you explain things (so amazingly) in a way that I actually can conceptualize and remember.
It's an old one, but: th-cam.com/video/c0kfcP_nD9E/w-d-xo.html
I needed that :has() pseudo-class. I encountered that before where I needed to select a parent based on its child
love your channel from India 🤗🤗🤗
:has() is awesome! I wonder why they haven't simply flipped the descendant selector though, i.e. .example-3 < img
The specificity of :is() and :where() seems more confusing than helpful?
Thanks for the overview and comparison!
So many new things I can't master...just great.
05:10 Why, just why? Why does selecting a general tag type is more specific than selecting a class... Why do they make such strange non-intuitive exceptions all the time? What exact purpose does this special rule serve?
:has looks really useful indeed.
very useful ~!
Thank you for the video, :has() is amazing.
Can you explain the benefits of specificity and do you think that it fixes more than the issues it causes?
I personally hate specificity in CSS, I don't see it being worth the trouble it causes.
You can use something like BEM to make it easier to style what you want, specificity is great to be sure you aren't making any mistakes, if it's bothering you, probably you are doing something wrong
Thank you Kevin, another excellent comparison and explanation of these new selectors!
Your jingle is the exact same as one of the 2 most major TV channels in Flanders (dutch-speaking Belgium) called VTM, fun little coincidence
Can't wait until Firefox:has(support)! It's gonna be nice to be able to start using that more often. Anyone have an idea of when they plan on releasing that beyond experimental?
Not exactly, but I'm pretty sure it's gonna happen this year... 😉
Now! 😊
Best tutorial on has like mini degree on :has()
I love your videos. They are so interesting!! But please, darken your intro. Changing for your dark-themed websites to your pure white intro is quite painful haha...
thank you!!!
Hi Kevin, I am pretty excited with the :has selector. Quick question. Does it mean that we can actually use it to apply different templates based on what we are rendering inside? Do you find it a good idea? Great video man, and keep the camera on, it makes it all personal !
Kevin Powell could you do some videos on the anchor positioning???
Would it be a good idea to use a mixture of "duplication" and ":is", like so:
.example-1 :is(h3, h4, a), .example-1 :is(.link, .something) { color: red; }
Would that solve the specificity quirk and assign h3/h4/a different specificity than .link/.something, or does using :is anywhere "infest" the whole ruleset?
That hierarchy point could cause some real problems. Looks like if you use is() you have to use it throughout the css. Not entirely sure I’m on board with it. The previous listed method works well and is clear to read
Now I want to write a regular expression to replace selector lists like *_example-1 h1, example-1 p, example-1 li_* to use is() instead.
/, {classname} (tagname) /is($1)/ or something like that, roughly.
Thank you so much for these amazing videos Mr. Kevin.
I am a little confused about these CSS frameworks, tailwind CSS and Bootstrap.
so I want to ask you which one should I select to work with as a front-end developer in a company ? or should I continue with plain CSS ?
Look into SCSS before digging into the frameworks. Just to give you a background on how SCSS works, especially, variables, mixins and functions.
is() and has() are awesome! I have no idea why would I ever use where(), but time will tell 👍
problem is I can't club :has() with :first-of-type(). Which means I can't apply style to the same element after checking if it has a child or not. Its so disappointing tbh
Hey, I don't know the best way to reach you but I hope you see this. I like using tailwindcss for my development. If you have ever used it or have knowledge, could you do a video explaining your thoughts and opinions about using the framework?
Will you show us how to do dynamic styling? Like change background color with route change( say react router).
Thank for the video!
Can you make a video of CSS inside the SVG, do :IS(); , :WHERE; and :HAS; work inside SVG? I thing it should but I'm too new in to this.
It's there any channel that explains things like you but with JavaScript?
I wish to add a tool tip that appears when I hover over a particular svg path.
What about backward compatibility? Won't this break the styling on machines that have older browsers? I'm thinking of Mac's that don't allow browser updates anymore due to withdrawn OS support. Also some Android phones have this stagnating OS / browser problem.
I'm guessing we're just ignoring this segment of the user base. ^^;;
This wouldn't be advisable for archival sites.
It's a concern, and requires that you know the analytics for your audience. :has() definitely is a little low on support still. :Is() and :where() are surprisingly well supported though.
@@KevinPowell :has() is definitely the most useful of the three so it is a pity. I design info sites for desktop use so it's a concern. ;)
Good video, thank you!
I think the :is() is not a big hit. Instead of multiple lines, the tags are given in brackets. OK, not much progress in one eyes. One point, though, is "forgive" the typo, good thing. However, I don't understand why the specificity of :is() is given a higher value. This is just confusing.
:has() should be called what it really is, a conditional selector/rule. It is even easier to explain as that.
The rule only works if the condition inside is met.
Hello, please, I have a question. I am new to the front end field, and I can make simple websites. I found your channel. It's great. What do you advise me to start with your channel? Where do I start to develop myself? Thank you
Looks like it might well be coming to Firefox soon. In version 103 you can set a config to enable it. Hopefully this means they are testing it out in the field.
.has() is the really useful one here. So many times I’ve wanted to select parent selectors. Hope Firefox get on board soon with it. .
it's finally supported in Firefox 121 and above
@@qedro yes!! I used it last week for the first time. I was far more excited than I should have been 😅
🔥
Can we use :is or :where with ::before or ::after?. Something like a:is(::before, ::after) ?
Just waiting on has to become more universal. There is also the :not selector which could have been so much better if it behaved differently
Does the name “is” for the :is() pseudo class not make sense to anyone else? Can someone explain the rational for naming it “is.”
I like has property for target to parentNode but unless its not supporting Firefox Browser.
Is it also possible to combine :has and :not? For example: If an link in my nav does have the class of fancy. Do this to all the others. And if the class fancy is not there, don't apply any style to the others.
Cascade. Set the value for has, first, and then remove or change any not.
I’m constantly rewatching to see if I can remember the difference bw :is and :has … :has is not forgiving like :is and :where … what else?
Can we have a video on @layers new CSS feature?
I don't understand how Mozilla is handling this.
IS this going to be in all Browsers?
Or does Mozilla say "no" for some reason? (....because they have it, but you have to activate it first - why?)
how do you get your css selectors be different colors? like your element being red and classes yellow
:has() does not work for me in safari and firefox... chrome and edge it is working... can you confirm
it should already work in safari now, but not in firefox yet...
Is it possible to style pseudo user agent elements of Safari? I. E. the Capslock Indicator and Keylock Icon on Password Inputs.
i want to ask: does this mean we can finally group vendor specific pseudo-elements/classes into one rule set using :is()?
i cant figure it out myself and dont see answears anywhere lol
Can someone give me a useful example of :where?
It seems redundant, like we can just remove :where
.main-content > :where(h1, h2, h3, .heading, .title) { text-transform: uppercase; } - The advantage here is two fold. First, instead of having 5 selectors (like, .main-content > h1, .main-content > h2, etc), we can have one selector, and second, it keeps the specificity 0,1,0, since anything inside the :where() doesn't count towards specificity. If we did that with :is(), it would have a specificity of 0,2,0. Maybe in this case that's not a big deal, but sometimes it's *really* handy to keep specificity low.
❤
You are wrong about 1 thing. You can use number for classes and ids. Just that you need to convert the name to utf8. So for example. If you have a div with class "1test". The css selector needs to be ".\31\74\65\73\74 { css code here }". You could even use just a dot as a class name. Not saying you should, but it is possible
You don't even need to escape the entire identifier, `.\31test { }` works just fine as well. (see css-syntax-3, § 4.3.1 / § 4.3.4)
Firefox is really lacking behind. It still doesnt have support for :has
:is() kinda feels like a coping mechanism for bad HTML. Why not just make default comma-separated class listing forgivable?
With CSS, they very, very rarely change an existing behavior. This probably wouldn't have negative consequences but with most things, a changé could potentially break older sites, so in general, things stay as they are.
CSS is pushing out awesome features very quickly over the recent years, making the currently bloated frontend development a lot easier. Remember when we had to give odd and even Classes to elements to target them?
Awesome topic, and I love CSS so much, especially with how it's been going so fast lately. That brings me to a trend I really find shameful and damaging to CSS: many developers I run into nowadays switch to Tailwind. Usually, people who only barely or have a very basic understanding of CSS and think they know it all. I hate that "framework" with the passion of a million suns. It's like reading a book without any punctuation or linebreaks. "We shall just dump 30+ utility classes in one line of code YOLO" - they tend to be people who DON'T know CSS. They'll say they do, because they know some CSS basics, but I can make them feel perfectly inadequate in less than 5 minutes.
So we have :is()... what about :was()?