Check out a free preview of the full CSS In-Depth, v2 course:
The "User Interface Selectors" Lesson is part of the full, CSS In-Depth, v2 course featured in this preview video. Here's what you'd learn in this lesson:

Several UI selectors can target elements based on their current state, such as whether a checkbox is checked, or a form input is valid or invalid.

Get Unlimited Access Now

Transcript from the "User Interface Selectors" Lesson

[00:00:03]
>> Estelle Weyl: Let's move on to user interface selectors. So in HTML, you can have elements that are enabled or disabled, you can have elements that are checked or not checked. So here it says, can anyone read this to me? Well, let me show you how you read it, you read it from the end.

[00:00:29] So it says any label, what does the plus sign mean?
>> Speaker 2: Immediately following.
>> Estelle Weyl: Immediately following, very good. So any label that comes immediately after a checked input of type checkbox. So right here we have a checkbox, and we have a label, and we have a checkbox, and we have a label.

[00:00:50] So if I check this checkbox, the color changes to red. If I uncheck it, it changes back, cuz it is no longer checked, same thing for here. And because I was thinking about accessibility and I included a label, I don't actually have to click on the checkbox. I can click right here on the label, and that will toggle it on and off.

[00:01:14] So that's toggling the checkbox, which is then activating the CSS, because this then starts matching. And so when I said earlier that CSS updates immediately, I just updated the UI feature and the CSS said now I match, right.
>> Estelle Weyl: So the UI features that we have are default, valid, invalid, required, optional, in-range and out-of-range, read-only and read-write, placeholder-shown, and we're gonna have either user-error or user-invalid.

[00:01:49] Neither of them are supported right now, it's in the spec, it seemed to be in flux, I read both of them depending on which version. So I'm not telling you which one it's gonna be. So in this form right here, we have, if it's valid, it has a border that's green.

[00:02:08] If it's invalid, it has a border that's red. If it's required, either via the required attribute being present, aria-required being set to true, it's gonna have a border of 5px. If it's optional, which means it's not required, it doesn't have the required attribute, the border will be 10px.

[00:02:35] Right, if it's out of range, which means, in notes, it says 5 to 7, that means 5, 6, or 7. Number between 0 and 10 means 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10. It does not mean 5.2, it does not mean 5.758. Because in HTML, when you have a range, you have a min and a max, and right here, we have a min and a max, there's a step attribute that we did not include.

[00:03:08] The step attribute defaults to the value of 1, if I had said step any, then it would have been 5, 5.0001, would also have been valid. But I did not include the step, so it defaults to the value of 1.
>> Estelle Weyl: In the second one, I put step 0.1., so 0.1 will be valid, 0.11 will not be valid.

[00:03:33]
>> Estelle Weyl: Here, it is invalid because it is required. We see that it's required because it has 5px, and I don't have a number in it. So it's matching required equals true, of having a 5px border instead of a 10px border. And because it is empty and it's not optional, it is not valid.

[00:03:56] So,
>> Estelle Weyl: If I type 4, it is not valid, and it is out of range.
>> Estelle Weyl: If I put 5, it's valid because it is in range.
>> Estelle Weyl: And the background became light green. When there is no value, it's not required, it's in range. So here, if I put -3, it's not valid.

[00:04:34]
>> Estelle Weyl: It becomes valid if I do 0.1, it's valid, if I do 0.15, it's not valid. So that's a mixture of HTML and CSS that you need to understand. So one of the things that is really important is to understand the attributes that you have. So a lot of the CSS that we've seen so far has just been based on selectors and classes, right, that's what we use most of the time.

[00:04:57] But if you understand HTML and all the attributes that it has, you can really make CSS even more powerful, you had a question?
>> Speaker 3: Does not valid express the same condition as invalid?
>> Estelle Weyl: Yes.
>> Speaker 3: Okay.
>> Estelle Weyl: And you know what, we can test it, let's just double check.

[00:05:15]
>> Estelle Weyl: So here I'm gonna do not.
>> Estelle Weyl: Yes, so if you wanna play around with this for just a minute. Okay, so when I was saying that CSS is powerful, if you're in the deck and you're playing with this, you're basically playing on a different page. So to move the deck forward, just click anywhere where it's pink, and then the arrows will work again.

[00:05:52] So when you're in here and you're editing this, the right arrow will actually make it move right, so it doesn't make the deck break. Right, so you have to just click anywhere out, and then you can move forward again, yes?
>> Speaker 4: The email address one, I'm curious about, cuz as you're typing, you might be typing an email address and it might be frustrating for an end user to see it go red, is there a way around that?

[00:06:14]
>> Estelle Weyl: You would not make it go red, you would actually, you'd do this, it's all over the web right now. But it's so subtly, this is obnoxious, so one of the things we're going to do today is, we're going to make really ugly websites. And the goal is, if you make an ugly website, you're not gonna worry about whether it looks good or not.

[00:06:30] So this doesn't look good, but your UI designer will put a little spinner while it's invalid. And then, yay, check mark when it's valid. Something less obnoxious than red and green, which we shouldn't be using colors anyways alone. Because some people cannot see the difference between that red and green.

[00:06:50] So whenever we do examples, it's fine today to make things ugly, do not put this ugly stuff into production. And so here's a little nifty trick, which you should also not put into production, but it's kind of cool that you can do it. So if you see at the bottom, it says, you have zero invalid entries.

[00:07:10]
>> Estelle Weyl: Right, cuz none of these are required, so this works with the JavaScript. But if I put the number 8 and the number 2, I now have 2 invalid entries. There is no JavaScript in this page. What I'm doing is, I'm using a CSS counter, and I think we'll talk about CSS counters later on.

[00:07:30] But basically saying, on the body, we set the counter to 0. And then every time you hit something that's invalid, increment it. And then in the paragraph, generate content that says, you have, whatever that invalidCount is currently, the counter of invalidCount, print that. And the reason that it has to come after, right, it comes after everything, is because I have to actually have those invalid entries for it to count.

[00:08:06] So that paragraph has to be after those invalid entries. Otherwise if I put it at the top, right, if I did, body,
>> Estelle Weyl: It wouldn't be able to count. If I did,
>> Estelle Weyl: liinth-of-type-2, which we'll cover later on, right, it would only be able to count the first one.

[00:08:41] If I did after, let's see if this works, I've never done this before. Yeah, so you can actually count your errors. This is not the best way to do stuff, this is not best practices at all. But I want to show you the power of CSS, that you can actually do all sorts of things if your JavaScript isn't working.

[00:09:01] Or if you want to tell some user how many errors they have, that their form isn't filled out and have it continually counting, you could actually do that. Progressive enhancement, don't make it required.