Woo hoo!
We have finally finished talking about pseudo classes.
Did you ever think we were going to get here ðŸ¤£?
Man, oh man.
But, well done.
Well done for sticking with me.
I've had a lot of fun.
So before we finish off the section, what have we learned about?
Well, firstly, remember we use pseudo classes whenever we want to style a state of an element.
When you hear the word state, ding ding ding ðŸ””, you think about pseudo classes. And there are a number
of pseudo classes of interest.
But this course is all about forms, and because it's all about forms, I've had to kind of focus our
pseudo classes on those most relevant to us.
So all of these that you're seeing in front of you now, we've been through numerous examples in this
course of using and targeting these states.
So by now these are going to become second nature to you, aren't they?
If I asked you to style a checkbox based on its checked state, all you have to do is target the checked
pseudo class and apply CSS styling to it.
The required is very common.
We've seen plenty. All of them in fact.
But you know what's frustrating is that there are many other pseudo classes, many others.
But I don't have time in this course to go through them all.
But the good news is that I thought, well, let me just in the summary lecture, look at a few well
supported pseudo classes that you may want to use in your forms at some point.
So it is still useful for us, but perhaps not as important as the others we've been used to.
Let me grab this rock, throw it at the screen and let's first look at this focus-within pseudo class.
This is an interesting one because it matches an element that has received focus or contains an element
that has received focus.
Do you get it?
So, for example, if you had a form, you might want the whole form to highlight, to glow, to become
a certain color, in some way
when an input inside that form is focused, then you would target this focus-within pseudo class.
There's also another one called focus-visible.
What's that about?
Well, that just matches focused elements that received focus via keyboard interaction rather than touch
or mouse.
This might be useful if you want to show a different style for keyboard focus compared to mouse focus,
for example.
And another well known pseudo class is placeholder-shown.
This pseudo class matches inputs and textarea elements that have their placeholder showing because
the value of the element is empty.
We've actually seen a few examples in this course already where we used this pseudo class.
Very, very useful.
So these are 3 very well supported pseudo classes.
The focus-within, the focus-visible and the placeholder-shown pseudo classes.
These states are very well supported by browsers.
There are others though, and there's some very good ones out there, but perhaps they are not as well
supported by all browsers, at least at the time of this recording.
So before we finish off, let me just look at some of these less well supported pseudo classes.
What are they?
Well, firstly we've got blank, and we've got empty. Basically both of these match empty form controls.
What is the difference then, if they both match empty form controls?
Well, I guess empty is more in depth.
It also matches elements that have no children.
But even more than this, it matches other empty elements like and <hr>, that's blank and empty.
And last but not least, we've got this user-invalid pseudo class. And when it is supported, it's very
similar to the invalid pseudo class but with better user experience.
If the value is valid when the input receives focus, the element may match invalid as the user enters
data
if the value is temporarily invalid, but it's only going to match user-invalid when the element loses
focus and this can be better UI. And if the value was originally invalid it will match both the invalid
and the user-invalid pseudo classes for the whole duration of the focus.
And of course in that instance in a similar manner to invalid, it's going to stop matching user-invalid
state.
And similarly to when we use invalid, it's going to stop matching the user-invalid state when the value
does finally become valid.
So there you go.
These 3 pseudo classes are interesting, but perhaps yet not as well supported in browsers as I
speak.
Well done for getting to the end of this section.
Well done for sticking with me.
I know we've been through a lot.
I know you've had to endure a lot of code with me, but seriously, well done.
It's only going to help you.
I hope you had a lot of fun.
I hope you're still having a lot of fun and I can't wait to get into the next section.