Pseudo-Classes

[00:00:00]
>> Kevin Powell: And we've already looked at a lot of ways to select things. We have element selectors, class selectors, ID selectors. We can get those more complicated using compound selectors. We also have something called pseudo classes. The reason they're called pseudo, it's a weird name, but it's because they don't exist in the HTML anywhere. We're not writing something in the HTML to be able to select that thing, right?

[00:00:21]
There's no class, there's no ID, it's not an element, it's something that exists in a different way. And pseudo classes in general deal with state. So what's the state of the element? Unlike a regular class that starts with a period, a pseudo class will always start with a colon. A few examples of state that you can look for: playing, paused, that will work on videos, audio files, or audio elements, open, valid.

[00:00:47]
These are looking at the state of it. Is this element open that would be on a modal that you're opening? Is the video paused, is the audio playing? Technically speaking, they would work on anything, but they don't make sense in a lot of contexts. A p playing doesn't make sense because a paragraph can never be played, or an a paused doesn't make sense because we can't pause a link or an anchor element.

[00:01:12]
So these will never be met, meaning you could write CSS there, but it's just never going to meet those conditions, so it doesn't happen. The two most often that you will use will be these two right here: hover and focus-visible. Some people might be wondering what about hover—sorry, what about just regular focus? If that's the case, we'll talk about it, don't worry. But these are a way that we can target our elements based on how the user's interacting with the page.

[00:01:41]
I was going to look at that one, but I think we're going to just jump right into the project file for this one. We don't have anything specific for the page in this case, so we can come up with our own styles for it. For example, the link, if I want to hover on top of that, I probably want to change what it looks like so the user—we already get the hand icon, but it's normal that you have, actually I think it's actually an accessibility standard that you should have more than one indicator that something is interactive, so just the hand icon changing isn't enough.

[00:02:17]
So I already have my a selector here, so then I can say a:hover and let's just say the color. What if I wanted to change the color back to like the default text color that I have everywhere else? I could do HSL, because we know this is the color, 0, 0%, 20%. And that would give us the color switching when I hover. Is there another way that I could do that? Yeah, Chris, can you use inherit? I can use inherit, yeah.

[00:02:46]
So I could say, when we're hovering, don't use that color I told you to use before, inherit from the parent. And now when I hover on top of that, it gets whatever the color of the paragraph was. It's nice, depends obviously if you're coming from like an actual design file, you'll probably have a more specific color, but we'll see a little bit later, this can actually be really handy to have. Now hover only deals with if we're using a mouse and we're hovering over it.

[00:03:12]
It doesn't deal with other ways users can interact with a page, such as tabbing through. So if I'm tabbing with a keyboard, you can see there's a focus ring that's showing up on there, but I want to probably also indicate through my other one, so I'm going to do an a:focus-visible. And now if I tab, whoop. Yeah, I forgot my comma. I broke the whole selector. So I have two selectors: a, when it's being hovered, comma, a:focus-visible, which means if visible, we're visibly focusing on it, we can see the color has changed there along with it.

[00:03:51]
So it's just an extra feature for somebody who's using a keyboard to navigate. It's not only people that use keyboards to navigate though. There's other ways we can—that focus ring that was showing up is a very common thing that you might see people do. Let's bring this open. A, or not even a, you might see something like focus, outline: none. And the reason for this is people build in a focus state, or there's the ring that's there, and then somebody, the boss visits the website and they start seeing these focus rings come up when they're clicking on buttons and they don't want those focus rings to be there.

[00:04:33]
So then the developer does this. What that leads to, I don't like normally calling out companies, but companies this size as ESPN, I don't mind calling out. Their site has no focus states. If I'm tabbing through here, you can actually see in the bottom, you can see that I'm switching links. The page is jumping. I have no idea what I focused on. It's really bad user experience. Some people go, well, how many people actually use keyboards to navigate?

[00:04:58]
We're developers. There's Vim users out there who never want to take their hands off the keyboard. There's some people might know Salma Alam-Naylor, who's a developer. She does a lot of public stuff, Twitch streaming. She lost, she couldn't use, she got, she thought it was carpal tunnel. It ended up being something else, but she couldn't use her keyboard or her mouse. She was doing everything through voice.

[00:05:16]
And if you're using voice to navigate on websites, it's using the tabbing mechanism the same way. You're saying next link, and it tabs to the next link for you. There's a lot of people that will get temporary disabilities like using, you can't use your keyboard. I think Chris Coyier actually speaking of him, he broke both his wrists once in an accident. Both elbows. Both his elbows, yeah, so you get these temporary disabilities that can come up and then you end up on a website like this that is completely unusable.

[00:05:58]
Yes. Is it possible to change the hover color via an inline style? No. I say that with 80% confidence. I don't think so, no. 90% confidence. If someone wants to tell me I'm wrong, I'll accept it, but I can't think of any way of doing it. The only reason I'm not saying it with 100% confidence is because I don't use inline styles for anything, but I can't think of a possible way that you would be able to do it.

[00:06:24]
The only exception would be if you can use nesting in inline styles, and then you could use your ampersand. I hope that doesn't work, but maybe it would, but it would look really strange. You don't specify selectors in inline. Yeah, exactly, because the pseudo state doesn't exist in the HTML. So I don't think it would be possible. So for the reason that I'm using focus-visible, I just realized I had a, I knew I had a custom property in one of these that I wanted to take out and I couldn't find it last night or this morning.

[00:07:02]
I'm just going to change that to say var, color is orangered. We're going to talk about custom properties in a second, but let's just make this a bit easier, orangered. So this demo I had just to show the same thing about creating hovers. We're not going to stress, we already looked at it, but what I do want to look at is the idea of what focus-visible is. So focus, most tutorials you see will tell you about focus and not focus-visible.

[00:07:29]
Focus-visible has been around for a really long time. All the user agent styles of modern browsers, they use focus-visible, not focus for all the focus states. When you use focus, this is a button element. If you click on a button element, it gains focus. This is that thing I just talked about. The boss clicks on it, there's a yellow box. Get rid of the yellow box. Oh, okay. Button:focus, outline: none, right?

[00:07:54]
And then you just broke it for keyboard accessibility and other types of accessibility. So outline offset, all of that coming on there, we're going to talk more about what those are, but we can see that it's getting it when I click on it. If I use focus-visible instead, focus-visible. It's going to update in a second. Maybe it did. If I click on it, you can see it's opening and closing, but it's not actually gaining that focus state.

[00:08:26]
If I tab to it, it does. So I can still interact with it with the keyboard, tab away, it works the way you'd expect it to. And that's the big difference with focus or focus-visible. Focus will always apply on elements that can gain focus, like a button, when you click on it, it's gaining focus. Focus-visible was added because of this pain point, and the browser's actually doing a lot to figure out what to do.

[00:08:49]
It depends on the primary pointing device that the user's using. It depends on the type of element that it is to decide whether or not it should show the focus ring, but the main thing to remember is on buttons, it won't show it, it will only show it with a keyboard, like you'd expect. Same thing down here, inputs, you can have, if I do a focus-visible. Oops, gotta spell it right. It's still going to show it if I click in these cases.

[00:09:18]
The browser's deciding it's an input, it should be obvious. The user's clicked in it, but you've clicked, you've moved your mouse away, you're typing stuff, so it's actually showing it in this case. The browser's deciding when it should be showing it depends again on the type of element as well as how the user's interacting with it. So you don't get to decide what those interactions are. The browser does, it's mostly buttons being clicked on where it doesn't actually apply.

[00:09:50]
But that's why I basically have completely switched from using focus to focus-visible for everything I'm doing. A question about focus-visible, does it also apply to tap to touch? We could test that actually. Whoops, let me open that one up really fast. So we'll do our focus-visible. So we talked about our dev tools. One thing I was going to say for when we did responsive design stuff was when you open up your dev tools, one of the options, it's in a, I think it's on the other side in Firefox, Safari's is completely different in how it works, but there's this icon that looks like a computer and a phone.

[00:10:28]
If I click on that, it gives me responsive mode. And responsive mode by default is simulating touch instead of simulating a mouse, so if I click on it, no, it's not gaining the focus. So it's only for tapping through on buttons. Yeah, that's a good question. Yeah, like I see the use case for focus-visible on a button, something that's JavaScript or changing state without refreshing the page. Is it a good idea to just use focus-visible everywhere, including anchors, or do you just use focus on anchors?

[00:10:58]
It won't change for that, so it's up to you. I've just started using focus-visible everywhere, so I don't have to think about it. Yeah, yeah. But if you don't mind just, oh in this situation, like an anchor just gets focused, then there's no harm in doing that because it's the exact same behavior, yeah.