And last but not least, we've got this indeterminate state.
And this indeterminate state applies when radios and checkboxes are neither checked nor unchecked.
Weird, right?
In those instances, they are considered indeterminate and they will therefore match the indeterminate
pseudo class.
So what elements can be indeterminate?
Well, we've already seen the progress element, right?
And when the progress element does not have a value attribute, the indeterminate pseudo class will
match that.
We can also use this indeterminate state on radio buttons and checkboxes.
How does it work with radio buttons?
Well, when all the radio buttons in the same name group are unchecked, then the indeterminate state
will apply.
When we're talking about checkboxes, you can actually put an indeterminate property or an attribute
on that input and you can set its value to true.
When you do that
then again, the indeterminate pseudo class will apply.
But actions speak louder than words.
So why don't we go back to our code that we've been dealing with, and let me show you how this indeterminate
pseudo class can be accessed when it comes to our radio buttons.
So we've looked at the checked pseudo class, or the state, we've looked at the default pseudo class
and the default state.
The final thing I want to look at is this indeterminate state.
What is that all about?
Well, firstly, in order for the indeterminate state to work, we are not allowed to have a default,
right?
We're not allowed to have a checked state because then it is determinate.
It's not in an indeterminate state.
So let's remove this checked attribute on this input.
In other words, we don't have any default state.
Everything is unchecked at the moment, right?
So right now we are in an indeterminate state.
How can I prove it to you?
Very easily.
Let's grab our inputs where it's type attribute is set to radio.
I'm just being explicit here, and I want to access this indeterminate state. And to prove that it is, all
I need to show you is that we can set the border to 2 pixels
solid red.
There we go.
So we know it's in an indeterminate state.
Why would you ever want to use it?
I don't know.
You could animate certain things based on the intermediate state.
For example, let's add an animation property here.
Let's say it takes 0.4 seconds for each animation.
The way the animation occurs, let's just say it can happen in a linear fashion.
It doesn't have to be ease-in or ease-out.
We want the animation to continue indefinitely, right?
So it's going to be an infinite animation.
And then I want to add this other property called alternate.
What I mean by this is that I want the animation to go from 0 to 1 and then back down from 1 to 0.
I don't want it to go from 0 to 1, 0 to 1.
I'll show you what I mean shortly
if you don't, if you don't quite get it.
And then the final thing I want to do here is I want to add keyframes.
And in order to add keyframes, let's just give it a custom name, our keyframe, and let's just call
it custom-pulse, just so I can show you how this pulsing animation works. In order to add keyframes,
we use the keyframes keyword.
We are targeting our custom-pulse here.
That's what we're defining.
And then we've got another keyword.
We want to start from somewhere
so we use the from keyword.
And this is our starting position, right?
We're going to start from 2 pixels, solid red.
That's where we want the animation to start from, and we want it to go where?
Well, let's just grow the border.
6 pixels solid red.
And if we save this, look at the browser.
How awesome is that, my dear students.
Remember I told you ...
let's actually make it longer,
one second.
If we don't have this alternate value here, then look what happens.
It just literally starts from scratch every time.
So it's quite jarring on the eye.
That's exactly why I put this alternate value there. And then you can play around with it.
You know, you can say from blue and then obviously it's going to go to to red.
Whew ðŸ˜«!
A bit irritating.
I know, I know.
But anyway, when a user then eventually checks a radio, it's not in the indeterminate state.
And of course everything stops.
So it can be quite useful.
You know, it just depends on what you're wanting to achieve.
Let's hop back to the lecture.
Woo hoo!
Well done.
We've come a long way, haven't we?
If you actually try and think back to our very first lecture, it feels yonks and yonks ago.
I've had a lot of fun.
I hope you have too.
And I hope you're learning a lot.
I hope this section about CSS, about pseudo classes, pseudo elements, I hope it's becoming more intuitive.
I know I've had a lot of fun and I can't wait to see you in the next section.
But you know what ... I'm actually thinking ...
before I do, let me just give you a summary.
Let me have one more summary lecture after this, discussing some of the things we've learned, and
then I'll see you in the next section.
Can't wait.