Styling Pseudo-Classes with Variants

[00:00:00]
>> So with pseudo-classes instead of needing, if you remember in, if you're doing it in like Sass or whatever, it's like ampersand, colon, hover, right, as a nested CSS property, or you can just write it by hand, like below, so on and so forth. But that's usually when a lot of the stuff kind of falls apart, right?

[00:00:19]
Which is like, okay, what about a hover state? I can't just put that in a class name. Or can you, right? So this is the button or a button that we might have ended up with in a previous session. It looks other than the fact that it is blue.

[00:00:31]
And the one that I made was purple looks pretty accurate to what I wrote. So then we're going to add this class right here, which is basically the pseudo selector for what it's like when you hover over it. So now if I hover over it, you can see that it turns out, it goes from blue-500 to blue-400, right?

[00:00:52]
Then I need an active for when I press it, cool, active colon, whatever you need to change. You can stack as many of these as you want. You can even stack the variance, right? So if you want, it's hard to think about what it would be with a button.

[00:01:08]
If anyone's got ideas, I'll do it. It's a problem of imagination because, hover and active are not at the same time. But you could say like, you take an input field, which we'll get to in a little bit, and it is very possible to be focused and invalid, right, or something along those lines.

[00:01:25]
And so you can just stack them up as you see fit. When we get to the responsive design section, those are also just variants as well. And you can actually just say, okay, maybe the hover effect is different on a smaller viewport. I don't know why anyone would do that, but if you look at the tailwind docs, that's their example in every single section.

[00:01:48]
You can go when you hover over it, it should go from two columns to three columns. I'm like, why would I choose violence like that? But that's their example. The other thing, and then it's not just for stuff like hover and active. I guess I could stack these if I wanted to and I think I'd do in a second.

[00:02:06]
Look at that, it's like I had a plan. Pass me had a better imagination than present me who's talking and looking us up at the same time. So disabled, right, is like how the button should be when it's disabled. At this point I put an opacity of 50.

[00:02:22]
I'll show you another trick with opacity in a little bit. So now, okay, that's what the disabled button looks like. But you notice that it still has a hover effect, right? Because effectively I chose two different CSS properties. If I changed the background, right, then CSS class order would take effect, but this one's only changing the opacity.

[00:02:41]
It is not changing the background color, so I'm getting both. So I could theoretically stack the two of them together and say, when I hover over a disabled one, be the original color, right? And that will effectively do the trick as well. Either or it's mostly to demonstrate that you can stack them more than anything else.

[00:03:03]
And so you have the ability to kind of add some of these. There's actually a lot of really, really powerful ones. You can kind of use to kind of create a lot of extra UX niceness in your app. So here is, this is not a complete list, because at one point the list was getting long I started cutting ones that I didn't think were that important.

[00:03:25]
And there are more than this because there's also first child stuff along those lines. These are kind of I'm just thinking about the input like states at this point. But this is the, I must add range because I was staring at the word range. This is the range of some of these variants that just for the states of an input field that you can support.

[00:03:45]
And even the ones that truly made it in at some point. There was a certain point before I called it and decided I'd put enough on here. But yeah, you've got your hover, you've got valid and invalid, so you can change the border color on an invalid input, in range and out of range for the input range type.

[00:04:03]
Whether it's focused or something within it is focused, disabled or enabled which honestly I'm gonna be really clear with you, until I was preparing for this I didn't even realize that enabled was a pseudo-selector in CSS. So that's cool. Placeholder-shown, that was another one. Auto fill, yada, yada, yada.

[00:04:25]
And you can kind of see indeterminate is when you can have a check box that has a line through it, right? It's not checked or unchecked. It's kind of that indeterminate phase, so on and so forth. So default is if you're on the default radio button or select, right?

[00:04:40]
You can have that set to a certain color as well. And there are more than this. And the nice part is auto complete is your friend on this one. These are like at one point when I just decided I've made my point with this list. And you can kind of see a bunch of them in place.