 We'll be looking first at this form that I'd created quite a while back as a bit of a redesign for Steam. And you can see I have these form elements that are here. And on the form input, which is the input itself. So we can see here, like I have an input with a class of form input, we can use an outline on those for the focus. And so if I come and I click on those, you can see it's adding that outline with a small offset on it around the input itself. And that's the normal focus. It's the one we all know and love. One thing people like to do is this, because they don't like the default focus states, please never do that. Or you need to replace it with something really obvious if you do. The outline none is very bad for accessibility. People keyboard navigate, including if I'm on a forum, I like tabbing through forums. And there's other times I will use it. And there's people that rely much more on the keyboard than I do. So please always have some sort of focus state that you're doing. But maybe this isn't the one that you want to have. And that's where some of these other ones do come into play. So let's take a look at the next one, which is focus within, which is an interesting one. So here on my entire form, right of a class of form, I can actually look to see if anything inside of that form has focus on it. So here, let's do a similar one, but we'll use lime green as my outline color. And now when I go on there, usually the entire form is actually being highlighted. Nowadays, we have a has selector. But in the old days, we never had that. This is really like one of the children or this isn't even a child, it's like several levels deep has focus on it. So then this can actually get different styles on it. I am using an outline, you do want to be careful with any of these because say it was a border, that could actually cause a problem because it would actually cause the layout to shift, you can see everything moves a little bit. So outline is a safer one, you can change background colors, you can do other things. You can get your entire form to be highlighted, which is kind of interesting, though maybe you don't want to go to that type of step. Instead, what you might want is here you can see I have this div with a form group. And this is a really common pattern to have. And maybe you want that entire form group to have the outline on it instead of just the entire form, which doesn't help too much other than saying like this is the general area you're in. But instead of having it on the individual input instead, I could wrap the entire thing. So it's including my label. And that could be another interesting way to be able to highlight what someone is working on. And this is a really simple example, you can do all sorts of, you know, you could change anything you want. So I could even change like the flex on stuff and move stuff around. And you could do different things, just be careful with it, don't overboard, don't make it confusing. But you can use it to for more clear navigation through a form or through other things that you might need focus states for. Now we do have one more, which is focus visible. But before we get to that one, I just want to say really quickly that if you're relatively new to front end development, I'm now devoting every Tuesday to more beginner-friendly content such as this video right here. And so if that sounds interesting to you and you haven't yet subscribed, then maybe consider subscribing so you don't miss out on any of that content. With that out of the way, let's jump on over to another example, which is this one right here where I'm going to look at this hamburger menu that I have at the top. And hamburger menus are very common these days. And one thing you might notice these days with focus is if you don't have any styling, which I don't, and this is a button right now, if I come and take a look, it's my button that's right here. If I tab onto this, it is getting this focus ring on there. And if I use my keyboard, it's not getting it. In the old days, focus would actually come on even if you clicked on a button. But these days, the default for that doesn't happen anymore, which is interesting. And that's because they're not using focus as the pseudo class, they're using focus visible. So just to highlight this, even if I custom styled my outline on here, if I click on here, it's getting that yellow border on it, or you can see that when I keyboard navigate, it is there. And this is why it's important to have keyboard navigation and to have focus states on things, because you want to make it really clear when someone's, you know, tabbing through something where they are on the page. So I definitely want that to get highlighted or have some sort of focus state on it. But if somebody clicks on it with the mouse, I don't really want that to actually get this yellow box around it, because it's kind of weird that, you know, now that I'm doing other stuff, that yellow box is still there. We know that I clicked on it because I physically did it. It's very different than when you're keyboard navigating because you want to know exactly what's selected. So when I push enter or space on my keyboard, I know what action is actually going to happen. So I'm going to put this over to a focus visible instead. And with it being focus visible, if I hit tab, you can see that it gets highlighted, and then I can open and close it with my keyboard, and I can go through and do other stuff. But when I click on it with my mouse, it does not get that focus state on it. And this is the browser making the decision on when it should be showing the focus state or not. But it's very smart about it. And the browser is doing it based on your input device. So whether it's a touch device, whether it's keyboard navigation, or whether you're using a mouse. And just to show you that it depends on the type of element as well. So here, if we come in back to my input that was all the way at the top here, and we put this back on, when I go in here, we actually get two of them now, let's come down and turn this other one off actually, just so we only have one on at a time. And so when I come on here, we're getting that the focus state that's on there. If I change this to focus visible, and if I tab through, as you'd expect, I'm getting it. But if I use my mouse, I'm also getting it. And that's because if I'm in an input, I might click and then move my mouse away and start writing and doing something. And it just makes sense for the default to just always be there. So a lot of the time these days, I actually think focus visible makes more sense than using focus because the browser is very smart, depends on the type of way you're interacting with it and the type of input that it is as well. Now you might have links or a few other things where focus still makes more sense than focus visible does. It takes on like how the user's interacting with it and making sure that it makes sense for your use case. But I really do think focus visible for buttons makes a lot of sense. And a lot of the time you can get away with it in other places too, since it's going to act in very intelligent ways most of the time. And speaking of pseudo classes, we also have pseudo elements. And I've found out over time that a lot of people, especially beginners have trouble with the before and after suit elements, understanding what they even are and how they're really working. And so if you've started using them and you've been confused by them, maybe you haven't heard about them at all. And they're one of my very favorite things in CSS to use, I use them all the time. I have a video right here that dives into everything you'll ever need to know about suit elements. So you can check that out if you're interested in that. And with that, I would like to thank my neighbors of awesome Andrew, James, Michael, Simon, Tim and Johnny, as well as all my other patrons for their monthly support. And of course, until next time, don't forget to make your corner the internet just a little bit more awesome.