We've been talking about the valid and invalid pseudo classes.
But now I want to quickly talk about when we're dealing with numerical data, the in-range and out-of-
range pseudo classes.
It's rather intuitive, but this is applicable on numerical inputs, inputs where its type are set to
number, where a range is specified by the min and the max attributes.
I keep mentioning input where its type is set to number, but it doesn't only apply in those instances,
it's any numerical input.
So inputs where its type is set to date, month, week, time, datetime-local, number and range will
apply in these instances.
Got it.
Cool, cool, cool.
Let's move on.
And what's interesting or something that you need to bear in mind is that when an input has data that's
in range, it's also going to match the valid pseudo class and vice versa.
Inputs whose data is out-of-range will also match the :invalid pseudo class.
What?
Isn't that weird?
"So then, Clyde, why do we need both?"
Well, the short answer is semantics.
The issue is really one of semantics.
Out of range is more specific.
What I mean by this is that using the out-of-range pseudo class is a more specific type of invalid communication.
So you might want to provide a different message for out-of-range inputs which will be more helpful
to users than just saying invalid, for example.
And if you are a bit confused, let me just jump over to the text editor.
You know we've been dealing with this form, the sign up form, first name, last name and an email.
Well, why don't we remove the email, replace that with some numerical input type like age, and let's
say it needs to be greater than 12.
Well, in that instance, let's start using the in-range pseudo class.
You'll see that the :valid also applies and how we can use them both.
So let's hop over to the text editor now.
For real
for real.
I'm literally just about done with my coffee.
Oh, I'm going to have to get another one soon.
But anyway, here is our call sign up form.
And as you know, we've got first name, last name, and then email.
But I want to show you now an example where we can target the out-of-range pseudo class.
And you'll see, once you understand these concepts, whether we are just targeting one pseudo class versus
another, it really doesn't matter and you'll see how easy and intuitive it is.
So let's just use this form because we've come such a long way and get rid of the email and let's put
in a input of type number, because now we want to work with in -range and out-of-range numbers, data.
So we're going to just quickly amend our HTML and then add a little bit of CSS and you'll see that it's
going to be really cool.
And then in terms of giving an error message, why don't we do something different?
Why don't we actually say something like access denied or, you know, you've been denied access or
something like that rather than just a cross.
So let's get cracking.
So here we are, we are at our div, where we've wrapped the email control. We don't want the email control
anymore, right?
So we save this and it's gone.
All I want to do now is I want to have a label.
Always good to get used to putting labels everywhere.
And here we're just going to ask for an age, right?
And we'll say must be 12 or higher.
I don't know.
I just can't think of anything else right now.
So age, the simplest. And then let's just include now an input
but now I want to type set to number.
Name,
we can give "age".
And the ID, of course, has to match the value of that for attribute, which is also "age".
But this time, I also want this to have a required attribute.
And look how cool this is because as we save, it gets exactly the same styling as everything else.
How awesome! And why doesn't it have the check, the cross?
Why is that not happening?
Well, it's because we don't have a span, right?
If we include the span,
there we go.
It looks like any other input.
And of course, any number now will work.
And as you can see, these input controls have the up and down arrow by default, and then the check is
displaying over it.
It's quite annoying.
So why don't we just push those check marks and the crosses to the right of the box?
Let's get to our code here.
Remember, we've got absolute positioning.
Well, instead of it being pushed to the left, why don't we push it to the right?
Let's try 10.
No, bit more.
15.
There we go.
Any number now will work.
Yeah, that works.
That works.
Still looks nice.
So there we go.
We've added our span, our inputs, but I want to add some constraints here.
So let's just say, min attribute can be set to what, 12 and the max?
Let's say we don't want people over 100 years old on our site.
Actually, you know what?
People do reach that.
Let's say 150.
There we go.
Let's refresh.
And now if a user types in, say, 5, we are still invalid, but as soon as
they use these toggles, we've got a minimum of 12 and we get a valid state.
So here we are targeting the valid state.
It is working, but an alternative is to use out-of-range.
What do I mean?
I mean, we can target the input, but now specifically target the state where the number is out of
range.
In other words, it's either below 12 or more than 150, and we can basically do exactly the same concept.
We can target the span,
this time it's ::after pseudo element.
We know what, we could even target the ::before pseudo element.
And here we want content to be, "Sorry, denied entry".
So if we are out of range, let' do 5,
we've got
Sorry,
denied entry.
You know what?
I actually don't want to target the ::before pseudo element.
I want to replace the word required.
Can you see the word required there?
So why don't we actually target the ::after pseudo class and let's put the number five.
There we go.
So at least that has changed.
Sorry,
denied entry.
Well, let's just put "access
denied". access
denied. And let's put 160.
Access denied.
There we go.
That's pretty cool.
The color we want white, but it is white already. Width, 100px.
Right.
Let's put 5.
At least now it's fitting nicely.
Maybe 100 pixels is too much.
Let's do 80.
Yeah, that's better.
Background color
can be red.
Yeah, that's fine.
8.
Access denied.
There we go.
Actually, the width can even be less.
Should we try 50?
70.
There we go.
That looks fine.
I want to push it,
push it left.
So let's do that.
Push it left 80.
I think that looks cool.
How awesome is this?
Can you see how cool it is?
So now we've got obviously different styling applied to different things. That's required. If this is
now invalid or if it's out of range, you know, if the user types 1 we get this "access denied".
How awesome.
And of course when we start going in range,
it disappears.
Very cool.
So there we go.
Very, very quick example just to show you that we don't always have to just target the valid pseudo
class.
We've got these others called out-of-range and of course in-range when we're dealing with numerical
data.
There we go.
I hope it's making sense.
And I told you, you know, it boils down mostly to semantics, but also it can be quite practical.
I mean, in our case, we did target the out-of-range pseudo class and we gave the user a very specific
message when it came to that being out of range.
So there's one very useful scenario of us wanting to target the out-of-range versus only the invalid
because the invalid pseudo class might have styling applied to all other form controls, in our case
first name and last name.
Okay, cool.
You've got it, you've got it.
There's just one more thing I want to mention, and it's a bit of a warning, but it's an obvious warning.
You just need to understand your code when you start writing HTML.
And I know it sounds obvious to say you need to understand your code, but you know, you really do.
And let me ask you a question.
What if you use both pseudo classes :required and out-of-range at the same time?
Can you do that?
What does it mean?
Well, as it turns out, they work very nicely together because when the page first loads, the required
class will be displayed right.
In our case along with that red cross ❌ and the border.
But when you've typed in a valid number, for example, a valid age in our case, then the input will
turn valid.
If, however, you then go and change the age entry to one that's out of range, then of course we show
that custom error message to the user - access denied -and the out-of-range styling is therefore shown.
Another thing to bear in mind is because the out-of-range rule appears later in our CSS source code,
than the required rule, the cascading rules come into play and the out-of-range message is shown instead
of, say, the invalid or the required styling.
So just bear that in mind.
Right.
All right.
But I think we've covered a lot.
A lot.
And yeah, there's still a few more things I want to mention when it comes to CSS and styling forms.
So stick with me and I'll see you in the next lecture.