Let's get started with pseudo classes.
So what is a pseudo class or what are pseudo classes?
And so the class is used to define a special status of an element, and this state can be used to style
the element differently than when it is in its default state.
Remember, most of the element has a state wherein the state is anything that respond to an event,
for example, click or mouse hoover.
So let me show you something here on this particular application.
Well, it will see that we have a couple of elements going on, talking about the navigation links here
and a button and then each one here.
Well, have a look.
If I move my mouse on the home buttons here, we see that this link has respond to an event called Mouse
Hoover.
So the purpose of this class is that when an element has respond to an event, I won't add certain style
to it, like what you see on the screen.
So that's all what we are going to do.
And so the classes can be categorized into subsections.
So let's get that well before we continue.
I have few ATM if I hear only each one and then have to link up my CSS and that is it.
So let's talk about pseudo classes and the first category we'll talk about is called impute pseudo classes,
meaning for input flow tool.
We can add some style to it based on user events.
So the first category here is going to be as impute pseudo classes as that.
Good.
And the first one we talk about is called required.
So let me show you here.
So we have H two and then the required attributes.
So let's have a simple input field here for this.
Let's remove the name and ID, let's give it a placeholder and say enter name.
Good.
So before you move on, let me show you an example of state for this particular input field.
Have a look.
If I click inside the input field, it will see that something has happened.
And this what you call state.
And the event is when I move my mouse and click inside the input field.
That is the event.
You see that the color of the border has changed and this would see the class this is all about.
So how can we add input field with an attribute call required?
Let's add one more input field.
And for this one.
Let us give it as enter address.
As that.
Let me save it.
Now, let me have some line break so that to be on top of each other as that.
Good.
Okay.
So the first one, let's give it attribute call required.
So the purpose for this class is that we are going to hire all input filled with required attributes.
So here we go.
So inside the case, here is how we add input into the classes.
Sorry, you bring in the element name or your selector and then semicolon tells you that is a pseudo
class and then our input filled with required.
I want to style it.
Let give it a background color of say gray.
And now we see that this one has a color of gray than this one, because this one, the enter address,
has no required attributes.
And I can also change the color on the text as whites.
So if I type, if we see that I have white text, so that is a feature or the pseudo class for you for
this one.
If I type it, this class or CSS will not be applied on that.
Then next.
See, the class selector is what you call disabled.
So I can copy this one for my input required here, these two here.
And then come down here and a comment and say disabled.
Disabled.
And then let me paste down here.
So let me comment.
This one's that.
I'm done with it.
Yes.
Good.
Good for disabled.
I need to remove this one and bring in disabled as that.
Now there is no style being applied to it.
So if I get to my CSIS, I can copy this one, bring it down here and change this one to disabled.
So now you can see that it has been applied.
So let me change the colour to let's say, let's say red.
Yeah, something like that.
Or let me give it a banjo background.
But instead, let me give it a border.
A border.
Let's say one, two parsecs solid.
I mean, red.
But I think for the seaboard, the grey is better.
Yes.
Sorry.
Yeah.
So let me copy that and paste it here.
Now, see that disabled?
Let me remove the border.
Sorry, guys.
The choice is yours.
See, now is disabled.
I cannot type in anything here that is disabled for you.
And you also have a property called Read.
Only Read only is normally used for verification.
Let's say that you want a user to enter his address and after entering, you weren't able to verify
that the details he or she has entered is correct.
Then you're going to use what is called read only, meaning the person cannot edit it so disabled and
read only the OP for the same functionality.
So here let me copy this one.
Come down here and then comment this one out.
This one going to be as read.
Oli.
So here on the name I'm going to use what is called read only attributes.
Now there is no style being applied to it.
If I get to my thesis now, I'll copy this one.
Bring it down here and change this one to read only.
Now you see, we have it that is read only for you.
And you also have players who are shown, please, who are shown.
So come down here and now let me copy this one also and come down here and let me comment this one.
Now, this one would be as place holder shown.
So it means that it's going to style any element that has a placeholder.
So for this, once they all have placeholders and to name and enter address, so how are you going to
achieve that?
So copy this one.
Come down here and then I will move this one and make this a placeholder shown.
And now because all of them has placeholders, that's why I've seen that color being applied to weight.
So let me remove one from here with that placeholder and then let's see.
Now we see that I think I need to have some line break also to have some separation.
Yeah, you can see that the first one has no placeholder, but the second one has.
That is why it has applied the style to it.
That is placeholder for you.
And what important attribute for the class is called invalid.
And we normally see this one in conjunction with before and after to create a nice user interface for,
let's say, a form or feedback form.
And after we talk about before and after, we are going to create a simple application called feedback
form and see how all this wants comes together to make complete project.
Okay.
So after this one, let me copy this one.
Now come down here, let me comment this one out, then let me rename this one to as invalid.
They're going to be as invalid.
Well as the name implies, it is used to style an input field when a user refused to provide the recommended
input meaning is invalid.
So let's say that we have now let me add a label here and say this is my label and for this label let
me remove the four attributes.
And next is let me give it, let's say your country.
Your meaning this a required field when I give it.
Star and semicolon, meaning enter your country name over here.
And next one is yes, it's okay.
So here let's provide a required attribute.
Remember, guys, the invalid works with required attribute where why this one is gray let me check
because I added a required attribute and in my case I have a required here.
So let me remove this one because we are done with that.
Now back to normal.
So how can we add a class when this field is required?
So have a look.
So inside my thesis, I'm going to select the import and then invalid.
Invalid.
And for this invalid, let me give it a border, let's say to P6, solid red.
Have a look.
If we say that by default, I have eyes red because this is what invalid?
Because it has no content in it.
Remember that the invalid works with required.
So if you don't provide required note take in effect.
So bring in required so that we can style the invalid as your.
I mean, see the class over here.
Perfect.
So what about valid?
Well, so as it implies, when it's valid, then it means that you can add a different color to it.
So the same html.
I will copy this one.
Come down here and says that when is valid what you want to do.
I want to change the border to green.
Now have a look.
As soon as I type in something here you see that I have the border being green.
This one has content because has a placeholder.
So let me remove the other one here.
The down here.
Let's stick to one.
You can see that by default I have the red because there is no content in.
If I type it, you see that the border had changed to green.
That is what is called invalid.
Invalid and this is really important.
Then next one you talk about is called in range.
So let's say that you have a slider and want a user to select or slide between some number.
Let's see 1 to 5.
If the user slide above five, you need to see the place or choose something that the person is out
of range.
So let me show you here.
So let me copy this one.
Come down here.
And let me paste it.
So let me move.
Some of these are here.
So here are going to be as in range.
In range.
So here I will say that select I can remove this one.
Okay.
So okay.
You're going to be in range.
Yes, in range as that.
So let me remove the label and now for the input, let me remove this one.
Also, let's add some attribute to it.
So a placeholder is going to be enter, let's say number.
Number between.
Between one and 30.
Yes, you see that?
Now, let me move the this class for valid and invalid.
I want to have multiple types in applied to these ones and I can remove even all these ones.
Yes.
No.
Yes.
So enter number are between one and 30, I think 1 to 30 is okay.
Yes.
Yes, we have it.
Now I want to have the minimum, supposed to be one, and then the maximum supposed to be 30 as that
if I save it now, nothing new.
So I didn't provide a required keyword or attribute.
So here is going to be required.
Perfect.
Now, here we go.
Well, let me change this one to number.
Okay.
Now it has been reduced the way.
So let me add some stuff to it to make a little bit longer.
So let me add some style and say the weight for this one going to be as.
236 okay, now I have it.
So we see that now I can slide this one or I can increase and decrease that.
I want the user to slide or choose a number between one and 30.
If I type in, let's say 50, I want to see that.
Hey, please.
We need to type, let's say between one and 30.
How are you going to do that one?
Good.
That's where to call in range and out range.
So let's get to the CSS and now let's select the input semicolon in range.
When we are in range, we need to add some color to it.
So let's give it a border of this one.
As for solid.
Solid green, meaning you are in range.
Okay.
So let me let me refresh it.
We see that now I'm in because one, two, three.
If I type in, let's see see that now the color has changed because now I'm out of the range, which
is 30.
Now 20 is in range.
If I make use of let's say 50 now, I'm out of range, how can I say that or add some style to it?
When a person is out of range, the sample says, I'll copy this one, come down here and say, This
one going to be as out of range, out of range, and give it a color of, say, red.
Now have a look.
Now I have red.
If I slide this one, have a look down to 20 and below, above 30.
How about 30 here?
31 here.
I get rid and it's really crucial for user experiences.
Well, so these are examples of the I mean see the classes for input field.