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.

Thanks man

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 KZfaq 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.

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

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.

yes, this is such a powerful pseudo class/selector, but it isn't supported by default in Firefox :/

@@TommyNT firefox wont corporate . so danm slow update this.

:is() has so much room for improvement

Probably a bit early to use it in every project, though realistically I guess it shouldn't be more than a year or two before it's fully supported

@@kenmken it works for my needs

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

Not bad... 👍

It's an old one, but: kzfaq.info/get/bejne/mZabmcaBxNSoaXk.html

Look into SCSS before digging into the frameworks. Just to give you a background on how SCSS works, especially, variables, mixins and functions.

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

Not exactly, but I'm pretty sure it's gonna happen this year... 😉

Now! 😊

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 😅

Cascade. Set the value for has, first, and then remove or change any not.

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. ;)

This definitely won't take a few years... 😉