Right,
so that's the checked pseudo class.
We've then got this :default state and this matches radios and checkboxes that are checked by default.
In other words, on the page load.
But what's interesting is that this is going to match the default pseudo class, even if the user later
unchecks that box.
What! I know, it sounds a bit strange, but let me hop over to our text editor,
let's take the code we just looked at when we were looking at the checked pseudo class and let's add
this default state and let me show you what I mean.
So, here we are,
we are at our previous example, you saw this when we were talking about the checked state.
Now I want to show you how we can use the default state and access the default pseudo class.
Let's say we want to set, I don't know, banana as the default selection and we want the word default
by this banana.
How can we do that?
Very simple.
All I want to do, I want to have a span element.
So let's just say here we've got a span.
Later on, we can choose whichever radio button we want to have this default on.
So I'm going to put an empty span element in every single one.
I just want to show you different ways to do things.
That's why I'm doing it.
And how do we use this default pseudo class?
How does it work?
Well, let me show you.
I want to access these spans.
Yes, we can just access it like this.
Okay.
But I don't want to. I want to show you a more precise and more specific way. We can access our input
element.
And of course, then we want a general sibling of this input where it's sibling is span.
And if we hover over this, what's really cool with the IDE is it shows us that we're targeting this input
and one of its siblings,
it doesn't have to be immediately adjacent,
that's why we're not using the +, by the way, we're using this tilde (~), a general sibling.
So there we go.
We are accessing this span.
I first want to set its position property to relative.
That's the first thing I want to,
well, pretty much the only thing I actually want to do. Because now it allows us to access the input
but now I want to target the default pseudo class and I want to access its general sibling of span and
I want to affect the styling in the ::after pseudo element.
I want the content to be default.
But now if we save this and we go to the browser, nothing happens.
And the reason nothing happens is why?
100%.
We haven't told the browser which radio button should be the default.
And it's very, very easy.
In order to do so, all we have to do on the input element itself is include the checked attribute.
It really, really is this simple.
And if we go to the browser now.
There we go.
We've got banana and then we've got that word default.
Let me just put it side by side to coding editor.
Right.
So our content of default is working, but I just want to style it a bit differently because now users
might think we're trying to say banana default, which is not the case.
Let's give it a background color of black.
Let's give it a color of white.
What does that look like?
There we go.
Maybe some padding would be good.
5 pixels to the top and bottom and 10 pixels to the right and left.
Yeah, I think that's looking quite cool.
We can also move it around because, well, actually, first we have to set its position property to ...
not inherit, to absolute.
Right. Now we can move it around so we can push it to the right.
I think that's really cool.
I actually think that's fine.
You know what?
It's a bit big.
So let me just decrease its font size.
Yeah, that's cool.
And then I just want to push it down slightly.
Top can be minus
should we try 4 pixels?
There we go.
How awesome is that?
But remember in the lecture, I said that even when the user later checks another radio button, that
default pseudo class is still going to be activated.
So if the user clicks strawberry, that default is still there.
That styling still applies to the original element that we set that checked attribute on.
Have you got it?
This is making sense.
Cool.
Let's jump back to the lecture.