Has Utility Class

[00:00:00]
>> Steve Kinney: Let's review for a moment. With the group, we can say that if the parent is hovered, right, we can style the children based on that. With peer, we can say the siblings afterwards. And like I said before, for the longest time that was all that we had to work with as part of css, thereby part of Tailwind.

[00:00:23]
We have a few new contenders enter one of them is this has. Let's call it a utility, right? And as you can see at this point it is safely supported for the last few years. Unless you are, I'm sorry, IE11, right? But you know, across the, across the major browsers, you know, I like to pick on Opera Mini as well.

[00:00:55]
That is the. I don't even know how much usage it has anymore, but that's when it would take a screenshot of a web page. So needless to say but at this point support is pretty good for has. And what HAS lets you do is basically group was children based on the parent state, right?

[00:01:13]
Has is parent based on the child state. And so it allows an element to basically query itself and say if it has a given selector that matches and I will spoil the end of this in the beginning. Cause I think it's just important to have the context which is if you have group where a child can ask about the parent and you have has where a parent can query its own children, you can combine these and do some really powerful things, right?

[00:01:48]
So let's kind of work through that as we can kind of see things again. I'll say this one more time. We pretty sure this is true, will not write a single line of JavaScript in this entire workshop. We definitely won't now because I've said that enough times, but I'm pretty sure we were never going to yet.

[00:02:07]
We'll do things that previously we probably have written JavaScript before in our lives. This is definitely one of them. The actual, you know, pseudo selector itself is incredibly powerful and almost all of it you can do in a single line in Tailwind, which is. Opens up a lot of stuff but it's really where we'll get to where it becomes really interesting is when we can mix group and has and sometimes peer and there's one more called in and another one called not.

[00:02:38]
Not is pretty self explanatory but we'll look at it. But by combining all these, there are a whole bunch of things that you used to need to use a certain amount of JavaScript for that you no longer need to. So let's go kinda take a look. So here we've got that simple version of checkbox that we did together.

[00:02:54]
The more complicated version slightly that we did together. But here you can see one of the first times that this shows up right? And this is effectively like just a query selector, like you would do with document query selector before that, jquery where you can say has and then brackets are the arbitrary value syntax in tailwind where you can just plug in any valid CSS and it'll work.

[00:03:24]
So you can say, okay, if this parent has an input in it that is checked, then give us a green border and as input check, give it a background green. 50. So now we saw this was focus within. Focus within was built in. It would only work for focus though.

[00:03:42]
Now we say has, if this parent has a checkbox that's checked, turn that parent element green, right? Then unchecked it goes back to the state it was no longer do you have to add or remove a class to the parent element based on some value that you kept in state?

[00:04:01]
Literally, CSS will do all of the heavy lifting for you. You can imagine where this keeps going. This means now let's say a form has an invalid input of any of the inputs you could theoretically disable or whatever the submit button with just kind of pure css, so on and so forth.

[00:04:29]
So here's another one which is basically like in this case, we can say for each one of these, all right, if this thing has an invalid input and this one's invalid, not user invalid, show a border red and a background red and if it's valid, turn it green.

[00:04:46]
So you can kind of see that automatically again, 0 JavaScript being written, right? I could say I don't make the rules on what the browser considers to be a valid email address. That's what the browser considers. I don't know that you could just do it solely a tld maybe you can.

[00:05:06]
I don't know. So now you can say that even on focus the state is true cuz it is again querying itself, right? No use state valid based on regex or whatever. This is a password field that has. I believe I put a pattern property on here. Let's see.

[00:05:22]
What did I do this one? I did not put a pattern property, but theoretically do a valid or invalid. So this one, the entire thing is going to change if this one has focus, you could do this with focus within as well. But so has basically gives you ability for any given parent to run any query on.

[00:05:45]
Theoretically you can also do peers as well with it, right? Because you can do in css you can do with the hashtag selector me and then the next element or something like that as well. But Pyrrho will do that for you as well. But the important, I think the more powerful one for our purposes is this ability for again the parent to style itself based on the status of any of its children.

[00:06:09]
And so tons of different places examples that you can do this and then a freebie because there are some things that I don't think needed their own section, so I just decided to sprinkle them in. So yeah, you can do hasvalid or invalid or has focus which is very much like focus within.

[00:06:26]
In fact you could theoretically do has input focus visible and get that feature that we joked about should exist later. The other fun thing that you can do in any given point is if you put transition colors, it'll automatically add a transition property to fade between colors. For all the different things you can transition between css, you can add one class and now your button will transition from one blue to the other as you hover in a nice smooth way as well.

[00:06:58]
Here's another example where we want to say has input checked because radio buttons also count as checked. If they're selected, we want to change the entire element. Again, you could always do this in JavaScript. Who wants to? Especially because effectively this is really one line of tailwind at this point.

[00:07:21]
I mean, I guess we changed both the border and a few other things and we give it a shadow. I was feeling feeling saucy at that moment. So now if I select any of these, you can see that the entire para element changes based on whether or not it has a radio button that is in fact checked.

[00:07:43]
Again, taking a whole bunch of JavaScript you could have written previously because you're like, I've seen this pattern before. Yeah, but there was JavaScript doing it and now it is effectively like 20 characters of a class name in tailwind as well. So there are some other interesting things you can do.

[00:08:01]
What did I try to do here? So this is has the checkbox, or has anyone that's checked they turn green, or I make it lighter if any of the boxes are checked. You can see I can change stuff based on whether or not anything selected. In this case, I was just being silly At a certain point, any given one, anything that's a selector you can find in here as well.

[00:08:31]
So if has- a select that has focus, turn the border pink, right? Why would you do that? I don't know. Just trying to show off the like that you can basically do any selector that you could possibly want doing here and begin to build out stuff as well.

[00:08:48]
But where I think it becomes really kind of powerful as this is kind of cool. Like if it has detail summary, has an open and close property so you can effectively change the styling on it whether or not it's open or not. There's some other ways to do some stuff like that as well.

[00:09:09]
But what I keep trying to scroll down to get to, but I kept writing more examples for reasons I don't remember, is matching that with group. There's one more I wanna show you. This is also important. This is why I take notes, right? So I don't forget stuff.

[00:09:27]
So you can do it based on whether something's focused or checked, any pseudo selector, right? But you can also change stuff based on what other elements are in there. Because if you can look for an input that's checked, you can also just look for an input. Which means if you, let's say previously you're like, hey, I have this card.

[00:09:47]
Sometimes it takes an image. Maybe prior in whatever your client side framework of choice is, you'd be like, okay, if image, then actually change the padding and make it a Flexbox. If no image, whatever, right here you can say something like just simply, hey, if it has an image in it, make it a flexbox, right?

[00:10:11]
And so the act of it having a certain, having a certain element in it will actually change the layout of the component. No JavaScript required. A place where I have used this before is I had to build a card where it's like if it has a link in it, we want to show a little arrow in the upper right corner that it goes somewhere.

[00:10:31]
And if the card has no link in it, it should be styled differently. That was a feature that I had to write in JavaScript and now a single CSS selector gets us there as well. So we saw the form validation as well. And so you can say this label, we're using the child version, so on and so forth.

[00:10:52]
Where I think it gets really interesting is and this is what I was looking for, group has, right? So like I said before, has lets a parent query about his children. Group lets children change their styling based on the parent. Adding those two together means that you can do stuff where it's like remember up here we couldn't do a previous element, right?

[00:11:16]
But we can say, hey parent, if you have an invalid input in it, maybe we want to turn the label red. It becomes a bunch of really powerful stuff that we can do in this case. Like I said, we can change the label or something like that. We can be able to go bidirectionally up and down and figure out if the parent has anything in this, then I want to be styled in a particular way.

[00:11:41]
Let's take a look at some ways that we can build that and then we'll do an exercise and try it on our own. But let's see how we're feeling.