:has Selector

[00:00:00]
>> Kevin Powell: Now we're going to look at one more other type of selector that we can use here to check for in this field set over here because I mentioned that we don't have a... What was it? What was the one I said we don't have? The user-valid within, which would be really fun. But what we can do, let's go find that field set. So we can see if it has focus-within. We can also see if things in CSS now have anything we want them to have.

[00:00:30]
So I can say, I'm going to start simple: field set has... And we can check what's in there. So let's just see if it has a type equals radio, because we know it does. If it has a type of radio, let's make the background red, just so we see that this is working. If we did this on any... Or let's just come in and change these radio buttons really fast. We're going to break the whole thing. That's okay.

[00:00:59]
We're just going to make them radio buttons which don't do anything. But now this field set doesn't have a type radio anymore, so because there's no type radio inside of it, now it doesn't have the red background on it anymore. And fix our radio buttons, we get the red on there. So we can say that has type radio valid. That are... Border color becomes our color success. So now if we select one of them, it now gets the green border on it.

[00:01:42]
The one issue with that, as you can see, is when we're clicking on one of them... Oh, actually in this case, we won't run into that issue. Potentially when you're clicking on something, radio buttons, if we switch, it might actually do something. No, it's not. Okay. It is possible when you're switching through these that the state changes a little bit with those ones, but as we can see there, it's working okay.

[00:02:05]
So we can check, is it warn the user, tell them when things are valid, invalid. Again, I've put a name. I'd remove my name for some reason. We're telling them this is wrong. As they go through the field, we're giving them that feedback all the way through. There's one other thing we can do with forms that I do want to talk about that's not related to user feedback, but it's a really good one to know: is the color of our radio buttons and our check marks.

[00:02:33]
You can create custom ones, but you can also just use the accent-color property. Accent-color, let's do yellow, just to have something, and you can see they've switched to yellow, or I can say accent-color white even, and they will switch over to white. So accent-color is super useful. It's radio buttons, checkboxes, range sliders, and probably one more element I'm forgetting. I forget if it's on the progress or not.

[00:03:04]
I think it's the default progress color. So accent-color can just be a really quick win instead of having to come in with a custom style just to change the color of them. And one advantage too is they're accessible by default, because you can see it's a white check mark on the red background right now. If I change this to be white, the checkmark becomes black. I can't control the color of the checkmark.

[00:03:25]
I can only control the accent-color. The check mark and the circle inside of these automatically update based on the color that I've provided it.