Back to pseudo classes.
We're not quite finished.
And remember by a pseudo class, I just mean it's a state that can be targeted with CSS.
So remember, pseudo classes are used to define a state of an element.
Specifically, they target elements that can't be targeted with traditional CSS like combinators or
symbol selectors.
What are combinators?
Well, there are 4 combinators in CSS.
A combinator is just something that explains a relationship between the selectors, right?
So there are 4 different combinations and you've probably used all of these in CSS. They are the space, which
just defines a descendant selector.
We've got the plus sign, which is an adjacent sibling selector.
We've got that little tilde key, which is a general sibling selector, so it doesn't have to be immediately
adjacent to the one we're dealing with.
And then of course, we've got the greater sign, which is a child selector.
You've seen all of these
I'm pretty sure if you've done any CSS. Then we've got simple CSS selectors.
What are those?
Remember that CSS selectors are just used to find aka select the HTML elements you want to style. And
simple selectors are different from combinator selectors.
Simple selectors are the ones that have a certain attribute.
So actually, maybe I should have called this attribute selectors.
They select attributes based on their class name, their name or ID. But sometimes, combinator selectors
or simple aka attribute selectors, are not enough.
And this is where pseudo classes come into the picture and they are a bunch of different types of pseudo
classes such as root, target, visited valid,
etc
etc.
And this is not even mentioning the bunch of pseudo elements such as ::after, ::before, ::first-line,
etc
etc.
And we've seen in many examples in this course that we can not only use form controls outside of forms,
but we can also target pseudo classes outside of forms.
"But Clyde, this course is all about forms."
I hear you.
So let me just jump over to the console quickly.
Let's create an input with type checkbox, and let's style that checkbox depending on its state.
And when you hear the word state, ding ding ding ðŸ””, you should think of pseudo classes.
So let's target the :checked pseudo class.
Let's use a CSS combinator selector and let's style the label of the checkbox.
Let me show you.
All right.
Very quick example, very fun example.
Let's just create a HTML document.
We'll have a style section because I want to show you how we can use a CSS combinator selector.
Okay.
In our body, all I want is an input with type checkbox.
That's all we want. We don't need a name.
We're not submitting this to a server.
The ID can just be foo.
That's the input.
Let's give it a label.
And remember now, the label in order to work has to be linked to a form control.
We link it via this for attribute having to match the ID on the actual form control, which is foo.
And we can just say here, toggle the checkbox on and off.
That's all we want to do.
And if we look at this in the browser, let's just open it up.
There we go.
Toggle the checkbox on and off.
And of course if we toggle it, nothing really happens.
Nothing exciting.
Let me just zoom in, so we can see it a bit better.
All right, so let's start styling.
What what should we do?
Well, I want to target this checkbox only when it's checked.
How can we do that?
Well, we can't use any traditional CSS selectors because it's a state that I'm trying to manipulate
or style.
And when we talk about states,
ding, ding, ding ðŸ””, we must think about pseudo classes.
So I want to grab this input element, but I only want to style whatever I want to style, when it's checked.
And of course, that's why we have that colon there, to denote that this is a pseudo class.
Now, if we try to style this directly, there's not much we can do because the actual input of type
checkbox is a bad CSS control.
And by bad I just mean it's more difficult to style.
For example, you can't affect its background color and set it to red.
Try and toggle this.
It's still blue.
The browser doesn't care what we say here.
You can't, you know, try and affect the actual check color by making that red.
That doesn't do anything either.
So in this instance, what I want to do is I want to target this input when its state is set to checked,
but then I want to use a CSS combinator selector, specifically the +, which is an adjacent sibling.
We know that the input and label are siblings, and label is immediately following input, which is why
we can put this + sign.
We then grab that label. And now the label itself
we can change its color, color to red, font weight
let's give it bold.
Now if we check this, look what happens.
How awesome is this?
And what a fun example.
And I encourage you to start playing around with CSS, combining things like pseudo classes and traditional
CSS selector methods, here the combinator selector +.
Anyway, hope you're having fun.
Let's jump back to the lecture.
So you're following along.
This course is all about forms.
We're talking about pseudo classes, so why don't we talk about pseudo classes for forms?
That's a great idea.
Let me start off by saying input controls and other form widgets have a few unique features. And there
are CSS pseudo class selectors that can target form controls based on their UI features.
And these classes are known as UI pseudo-classes.
"Okay,
Clyde so where did it all begin?
Who's given us access to these UI pseudo-classes?"
Well, the original pseudo-classes were given to us by CSS 2.1.
Which one specifically?
Well, the ones relevant to forms are :hover, :focus and :active.
Hover selects an element only when it's being hovered over by a mouse. Focus,
obviously when that element or form tab is focused. And the :active pseudo class selects an element only
when it's being activated, aka while it's being clicked on or when the return or enter key is being
pressed down in the case of a keyboard activation.
But CSS 2.1 is rather old school.
Yes, we still use :hover, :focus and :active, but the good news is that more pseudo classes have been
given to us by more recent standards, standards like the CSS Selectors Level 3, and CSS Basic User Interface Modul
Level 3 specifications.
They added more pseudo classes related to HTML forms that provide several other targeting conditions
that you can take advantage of.
"Like what,
Clyde?"
Well, we've seen some of these already - :required,
:valid, :in-range,
etc
etc.
The opposite of required, by the way, is optional.
We've also got the optional pseudo class.
We've already seen many other examples.
We've we've looked at ones that target the invalid pseudo class.
We've got others as well.
Examples that you've seen in this course like :checked, :indeterminate,
we've got other pseudo classes like default, read-only, disabled, enabled, etc etc.
They are actually just too many for me to list on the screen.
And in this course we have looked at a lot of these already, haven't we?
And we still going to look at these.
When you're dealing with forms, you're going to be dealing with these all the time.
And just to be clear, the ones I've just spoken about now are not the only pseudo classes available
to us, but they are the most useful when it comes to forms.
So you can tell there are many different types of UI pseudo classes.
Hope you're having a lot of fun.
Hope it's all making sense.
Hope it's all coming together, and I'll see you in the very next lecture.