Pseudo Classes, Elements & Transitions

[00:00:00]
>> Let's talk about pseudo-classes. I mentioned earlier, these do affect CSS specificity, and we'll see that in a couple moments. So there are several different types of pseudo-classes for input elements. These are gonna relate to form elements and allow you to select elements based on HTML attributes. So this is like enabled, disabled, checked, if the checkbox is checked.

[00:00:28]
If a form element is required, if it's optional, we can target those elements using pseudo-classes. These are not comprehensive as well, so check out documentation if you need it. There are location pseudo-classes, so these relate to links. So a link is visited if it is a link. You can target those those elements.

[00:00:51]
If we have media capable of playing things, we can target whether or not it's playing or if it's paused, if it's a video or audio. Tree-structural pseudo-classes are one of the most useful. So nth-child, we can select the sixth child in a list or the first of that type of element.

[00:01:11]
Last-child, this is often, if I want to give every navigation item a margin inline end so that there's space in between it, we don't want the last one to have margin. So we can say, we don't want this last child, target that last child, we don't want that to have a margin.

[00:01:29]
We can target whether a user is hovering over an element, it's focused. These are often very used when we're working on accessibility states. And then there are a couple of functional pseudo-classes, like not is a really useful one, right? So we wanna target all links. We wanna give all links in our navigation margin, right, except we don't want to target, so not, the last of type, so not the last element.

[00:01:53]
We'll see what that means in code here. So here we've got a list. How would I make the fourth one red? Anyone know what type of pseudo-class I might use or pseudo-selector I might use to target that fourth one?
>> I use the nth position.
>> Yes, nth, so we want to target list item, nth-of-type(4).

[00:02:17]
So the fourth list item, we wanna color that red. If we've got a navigation bar, I want the text to be bolded on hover. So what pseudo-class would I used here?
>> Hover on bold? Hover.
>> Yeah, hover. So all links on hover, make them bold. Last one, if I have a checkbox and a label, I want the label to be read when the checkbox is checked.

[00:02:49]
What might you use here? This one's harder.
>> Do we have checked? No. We do.
>> We do have checked, yeah.
>> Wow.
>> Absolutely.
>> We are hearing this for the first time.
>> Absolutely we do. So what I'm saying here, input, type is checkbox, so only checkbox's inputs, right, not text inputs, not other type of inputs there are, only checkbox's.

[00:03:16]
If it's checked and it's immediately followed by a label, say a direct sibling or an adjacent sibling, remember that combinator here, color it red. That's a big one. I know that's a really ugly selector, but that's how you might do that.
>> It's helpful, anyway.
>> Yeah, I'm glad.

[00:03:34]
So those were pseudo-classes. Pseudo-elements are a little bit confusing, admittedly. So I won't dive too deeply into them, we're not gonna use them much in our code today. They're similar to pseudo-classes. They act as if there was an HTML element in the markup. So if you've seen a tooltip, remember we hover over the paragraph.

[00:03:54]
So oftentimes what you'll see is a box that says, hover here, and then when you hover, tooltip will come out, right? And often we see on the box, they've got this caret symbol that connects, so it's clearly, this is a flyout that's attached. You might use a pseudo-element there to give it a before and after, give it some dimension.

[00:04:13]
It's a little bit more advanced, so we're not gonna cover that. But here's an example of a pseudo-element here. So if we've got a paragraph and we want to select the first line of it and make it red, we can use that first line pseudo-element like that. We could wrap the first line in a div and give it a selector that makes it red, but what happens when we change the width?

[00:04:37]
Then you don't know where the text on the first line stops and wraps through line. So using the pseudo-element is gonna be the easiest way. Okay, but real, quick circling back to specificity, we had those three classes ID class type, right? Pseudo-classes and pseudo-elements, they hold weight when we're calculating and they fit into these columns.

[00:04:56]
So if you've got a pseudo-class or an attribute selector, remember we saw type = checkbox in a previous example, that's called an attribute selector. They hold weight, so they will give you points in the class column here. Pseudo-elements like placeholder, for example, when you're styling an input placeholder, those fit in with the type column.

[00:05:19]
This is the last one before we actually put the stuff into use, and it'll become a lot easier as we're doing it in real time. But transitions are gonna make transitioning from one state to another much more beautiful and less jarring, right? So for example, when you have a nav that slides in on mobile, It would be kind of jarring if it just appeared.

[00:05:43]
So being able to transition some of these properties is really important. So there are three properties that we will work with as they relate to transition, so property, duration, and timing function. Property is the name or names of the properties that we want to apply it to, whether that's background color or position x, for example.

[00:06:05]
These are the things that we wanna transition. The duration is how long the transition should be applied over, the time frame it should be applied over. And the timing function, these are a little bit tricky, but it's essentially a curve that defines how over time these properties should be applied.

[00:06:22]
There is a website I've linked here that physically will draw out all of these different timing functions for you. So as the time goes on, how is the transition applied? That's a visual depiction of it. EaseIn, easeOut, these are pretty common ones, linear is also pretty common. A curve is literally, over time, apply it evenly, across time.

[00:06:49]
And you can, again, define these in three separate properties, but we can use the shorthand as well. So really quick example here before we, Jump into our code. We've got a box here. On hover, we want the background to be blue, right? Look at this, with hover, it changes immediately.

[00:07:11]
It's fine, but to users, this can be a little bit jarring if we're animating an entire navigation in, for example. So here, I set transition. I wanna transition our background over 0.2 second or was it 2000 milliseconds? And I wanted to ease-in, that's the timing function we're using here.

[00:07:31]
It could be linear, it could be ease-in, out, I just chose ease-in, right? So now if I hover over, you can see it's transitioning. So it's a pretty straightforward way to add small animations or transitions between states without getting too hefty into animation timelines. So we'll use this with our navigation.