(music)
Man, this is fun.
This is fun.
Welcome back.
Oh, man.
I don't know why I've got a jersey on - I'm getting really hot, and I've got a cup of coffee right in front
of me.
Let me show you.
I'm not playing games here.
This is for real,
for real.
Look how good that looks.
So, anyway.
And of course, you've got to have your little biscuit with your coffee, too.
There you go.
All right.
Hope you're having fun.
This is what life is about.
We need to enjoy what we do.
So what do I want to do in this lecture?
What do I want to do right now?
Well, as you know, we've been talking about checkable items.
And I mentioned that there's this :checked state.
In fact, it's a :checked pseudo class.
And what that means is that you can't visually really see it in the DOM, but it's there and we're allowed
to target it with CSS and style up buttons or checkable buttons depending on that :checked state.
So it's really, really useful.
It's something you really should know about and I thought, you know, we could move on, but I want
to show you how that :checked pseudo class works.
So let's code up a very, very simple example.
Oh, man.
Let's get into it.
All right.
Let's create an HTML document.
Oh, you know what?
I actually need to switch this music off.
Otherwise, I'm just going to keep going.
I'm just going to keep going.
All right, let's create an HTML document.
Man, I love this stuff.
And within HTML, in the head section, we're going to include our CSS styles.
For now, let's just leave it blank.
Of course we need a body.
And in our body, I want to create a form.
And, you know, in order to create a form, we use
what?
That's right,
the <form> element.
We don't need an action here.
We're not submitting this to a server
just yet.
We'll see an example later in this course. And in this form,
I want to create, you guessed it, an input with type checkbox. And its name can just be foo and the
ID can just be example.
It doesn't really matter here.
And then I want to have a label for this checkbox because I'm going to show you how we can target the
:checked pseudo class to style that label.
It's going to be really cool.
So you know how labels work.
The "for" has to match the ID of the input we want to link it to.
So here we gave the ID of example to the input, and we can just say this is a :checked pseudo class.
That's what we're doing.
The other thing I want you to know, is that this :checked pseudo class does not apply to all input types.
For example, it's not relevant for an input of type text.
So let me prove that to you.
So let's just have two breaks here.
Under here
then let's have an input, this time with type text.
Its name can be bar, its ID can be example2.
Again, I want to label. Its "for" has to match the ID of the input we want to link it to.
In this case it's example2. And all I want to say here is "This is a text box". And then I want to just
emphasize again that the text box will be ignored because it never receives the :checked state.
All right.
Well, let's see what this looks like.
Let's go to Live Server.
Open it up.
So here we go.
Nothing special.
And when we check this checkbox, nothing happens.
Can you see that - there's no visual difference.
Well, yes, we get, you know, the browser styles that box and there's a tick.
But other than that, nothing happens, especially to that label.
All right.
And obviously it's the same with a text box.
Nothing happens.
How can we target that :checked pseudo class in order to style this?
So when a user toggles a checkable item, he or she is made visually aware that that's happened.
It just adds a bit of pizzazz âœ¨ to your form.
So how do we do that?
Well, let's go to the coding editor and let's start styling this up.
You know what?
Let me have it side by side.
It's always quite nice and you can see what's going on as we go.
The first thing I want to style is our paragraph.
Font is a bit big, so let's just put 0.7em.
How's that?
That's better.
And let's change the color.
I never like black.
(sneeze)
Excuse me.
Ooh.
Another sip of coffee.
Mmmmm.
That's good.
Okay, let's keep going.
So that's our paragraph.
Done.
Now, what do I want to do?
Well, I want to target that label.
There are many ways to do it.
A cool way is we first target our input element, but now we can specify its type in CSS, and we know
we want to type of checkbox.
We don't have to do this, but I just want to show you the many ways to do something when it comes to
coding.
So now we've got that input type of checkbox.
Then what I want to do is immediately select the next element that is a label.
That's what that means.
And then we want to style that. Color
let's try #ccc.
What does that look like?
There you go.
It's kind of grayed out, right?
And then let's have font-style.
Let's just make it italic.
Yeah, I think it's starting to
come on. Now,
I want to target this :checked pseudo class and you'll see how easy it is.
And we could target the input again with type equals checkbox, for example, and then target the checked
pseudo class like this.
But remember, I wanted to show you that the pseudo class doesn't apply to other inputs.
So actually what I want to do is I want to grab all our inputs right within the page and I want to target
their :checked pseudo class.
That's what I'm wanting to do.
And specifically, again, I'm wanting to style that label.
So that's exactly what I'm trying to do here.
And how should we style this label when it's checked?
Well, you can do whatever you want.
This is not a course on CSS, but I want you to understand how you can use it in order to style it according
to your needs.
So I'm just going to do a quick-and-nasty.
And on the topic of quick-and-nasty, let's do hot pink.
How's that!
All right.
And I'll even prove it to you. If I now toggle this checkable item,
what's going to happen?
Well, how cool is that?
You can already see we targeting the :checked pseudo class.
Wow.
Come on.
It's that easy.
I'll just apply a few more stylings just so you can get a few ideas.
You know, we set above the font-style of italic.
Well, why don't we set the font-style now just to normal?
You know, we'll revert back to normal.
We can set a box-shadow property here.
1px 1px 4px 1px.
What color?
Well, we are on the topic of hot pink, aren't we?
So there is our box-shadow.
What else can we put?
Maybe we want some padding.
Just a bit of padding, who knows.
And let's see what this looks like.
So I'm going to check it right now.
You see, it is so, so intuitive.
It's so, so much fun.
And these are just a few ideas, really.
What I wanted to prove to you here is that, (a) it is super easy to target that :checked pseudo class.
And secondly (b) I wanted you to know that nothing's happening to this text box.
We can still type Wally here.
Nothing happens.
It doesn't get that checked
state - it's not a button, right?
It's not a checkable item, so it makes intuitive sense.
It only applies to checkable items - radio buttons and checkboxes.
Got it.
Well, then what are we waiting for?
Let's move on to the next lecture.
Hope you're having fun.
Hope you're staying motivated.
Adios. (background music plays)