Required Field Indicator

[00:00:00]
>> Kevin Powell: So now we've seen this new has selector that I use there, so it's a pseudo class. We have the not and the has, they're both very powerful selectors. Has was recently added to CSS. It was another one that we thought would not exist. It's actually called the relational selector because it allows us to select things based on the pieces that are inside of it and the relationship between different elements.

[00:00:21]
We can use this in another way, also with pseudo-elements like we've seen so far. So earlier on, we had these required attributes that I'd mentioned, and they're on these inputs, and then we have the labels that are coming after them. Now what we can do is a lot of the time you're just going to have input label, input label like this, or actually let's go up here, sorry, we have the input and the label and the input.

[00:00:47]
It doesn't matter which way around they are. In this case, up here, I have these informed groups, and then we have the label that's coming right there. What this enables us to do using the has selector is I can go inside the form group, check one element to see if it's there. If it is, I can select a different element that belongs in there, and that's why it's a relational selector, because it allows us check for this one thing, then go find this other element and do something else on that one.

[00:01:15]
The reason I'm bringing that up is because it's another type of input that we can provide to users to show them that fields are required. So, I want to see if a form group has a required field. So let's start with that. Dot form group. Has and we can just use a required like this. Required is an attribute, don't have to be equal to anything, or it doesn't have to be equal to anything I should say, and we can see, does it have a required attribute inside of it.

[00:01:49]
Has is always looking at the descendants. It's not the direct descendants, so it's not just the children there, it's any descendant inside of it. Does it match this? Just to see if this is working, background red again, and we should see we get some red background showing up. So our farm groups, we know they all have it. I'm going to take name off as a required one, just so we can see that it's working in different places.

[00:02:15]
And now the first one's not required, so we don't have it, but these two is showing up. So our form group has required, it's these two, but that's kind of not the greatest, you know, this doesn't make any sense, changing the background color of it. But what I can say is form group has required, this is a single selector. I can now add a descendant selector onto that. So then I can find the label that is nested inside of that form group and make the background of that label red.

[00:02:48]
Well, it doesn't make much sense either. What if we came in and added a pseudo-element here? And on that pseudo element we give it some content. Maybe that content is a star. Which is a very common pattern that you have a star. Let's make this a bit bigger. It's a bit, uh. Body. Font-size. 1.25 REM, we'll start with that. Oh no, I carved, oh, it did get bigger. OK. I thought I might have hard coded some font sizes into these.

[00:03:28]
Oh, did I? One second. Oh, I just have, there's the order coming in again. We're going to go really big just so our stars sort of stand out. Oh, it's my labels have a font-size. And then we can drop this back down. There we go, now we can see those a little bit more clearly. Form doesn't look as nice, but that's OK. So we've added a star. So I can see there's a star here and a star here. Now we can make that a little bit more accessible, we can also say this is required.

[00:04:00]
Helps give it a little bit of alt text to that. One of the problems is the star is stuck to our element. I could actually just come here and add space. It's part of a string, it adds a space in there. I've seen people come in adding margins, displaying flex and gaps and stuff. Definitely possible to do that, but for a single space it would work. I cannot, just like an HTML, you can't spam it, it's not going to work here either, just in case you try, but we can put a single space so that works.

[00:04:32]
And then I can come here and I can change the color, cause it's regular text to a color of my color warning, let's say, to say, you know, the little star next to them, oh no, maybe error would make more sense. So we can come in with a little red star next to any of the required fields. We could do the same thing in other locations, but in other places it gets a little bit trickier because once again here, the field set, we'd be doing the same type of thing.

[00:05:00]
We could check if the field set has anything that's required. If it does, then our legend would get the star on it. And then finally down here, we would check for a very specific pattern, because I've actually nested my input in the input in the label, which is a pattern that you can use. So here I'd be checking if my label has a required and if the label has it required, I'm also adding it. So there's a few different things you'd have to do depending on the patterns that you've used to create your form.

[00:05:28]
And I think it's a nice little opportunity to experiment with to see if you can match them, if you want. I don't think we need to run through them all, but if anybody wants me to look at one of them, I don't mind diving into it. But it's a little bit strange. We've looked at a few new things there. Does anybody have any questions about has or not? Since we're talking about forms, are we able to style selects?

[00:05:55]
It's coming. So select there originally we were going to get a new element. I talked about how they don't like changing things, they like creating a new better version of it. So we were going to get a select menu element that would be the same thing but stylable. Then they said, you know what, we'll just make a select, be a select and add this in cause nobody has done any of the styling that we're going to be doing, so selects are becoming stylable.

[00:06:24]
They will, I was talking with a few people on the break here. They are going to involve a fair number of pseudo-elements to be able to do all the different pieces, so talking about them and some of the new features coming that include pseudo-elements, because you have a pseudo element for the selected element for the background of the drop down for the regular piece. There's a bunch of weird things with it, but if you're in Chrome, I don't know if it's in production Chrome yet.

[00:06:51]
But you can definitely play with it. I have played with it a little bit. It's going to be a bit of a learning curve, but it's anything is possible now with it, so it'd be really good. Yes, Amy. If not, you can have multiples, and I know has has, there was like this infinite recursion problem that they were trying to solve for. Can you have more than one element in has? So same thing, you could do a comma separated list.

[00:07:23]
And there's any time you see a pseudo selector that allows you to select other things, the list inside here can be a comma separated list, so I don't, has required, let's say has. We'll just put label for fun, just so we can see that now this one's also getting it, cause this has a label in there. It's not meeting both of them, it's either or. So if you wanted it to match multiple things, so it has a required, and it has this other thing as well, you'd have to chain them together, so you'd say has has.

[00:07:59]
So it gets a little weird, and then we could say label. Not the most realistic one, but this one doesn't get it now cause one of the two requirements isn't being met. I don't know if I've ever done that. Chaining has together. One thing that's really important actually with has, you cannot have a has inside of a has. In this case it wouldn't work anyway, it doesn't make sense, but one of the reasons we were able to have has is, as you said there was potential recursion issues and this would cause a lot, so we don't have the ability to check multiple levels deep.