00:00So in this video, we will see what pseudo classes are.
00:06Pseudo classes are when an event is driven by our mouse.
00:12For example, if we hover our mouse over something, its color changes.
00:17If we click on a link, its color changes.
00:21If we click on a link, its color changes.
00:24Often we see that when we search on Google,
00:27when we search the same thing on Google again,
00:31the color of the subset we have opened is different.
00:35So all this is used in pseudo classes.
00:39So let's use it in pseudo classes.
00:42Let's use anchor tag first.
00:45And we are not giving a reference to it,
00:49so let's put a static tag on it.
00:52We will not give any page or URL to it.
00:55Let's give it a class named link.
00:59Let's give it a text.
01:01This is a link.
01:04Okay.
01:05Now let's style it a little bit.
01:08.link
01:10Let's give it a font style.
01:16Let's give it a font size.
01:18Let's give it 16 pixels.
01:22And
01:25First of all, we use our pseudo class.
01:28.link
01:30Pseudo class is for class.
01:32Pseudo class is a different thing.
01:35And pseudo element is a different thing.
01:38So for pseudo class, we use colon.
01:42So after this, we write our class.
01:45So first of all, we will write link.
01:48It means
01:52This is an
01:55Unvisited
02:05This is an unvisited link.
02:09This link class means
02:12Let's give it a color for example.
02:15Green
02:17Green color means it is not visited.
02:21Let's give it a green color.
02:24Okay.
02:26.link
02:28We gave our class.
02:30Pseudo class is visited.
02:32It means it is visible by name that this link is not visited.
02:41Similarly, we will give it a color.
02:46We will give it a light color.
02:49Which will be a visited link.
02:52And this will be a power link.
02:55Power link means that when we
02:58We will take our mouse on it.
03:01We will neither click nor perform any event.
03:04We will just hover our mouse on it.
03:07So it will change its color.
03:11It will change its background color to blue.
03:18Blue is its by default color.
03:21So we will make it
03:25Yellow
03:28After this, we use active class.
03:31The mistake of active class is that whoever clicks on the link
03:35It tells that this link is now active.
03:39Okay.
03:42Now, as soon as I hover my mouse on it.
03:45So it changes its color.
03:48And as soon as it is clicked
03:51So this will be a power link.
03:58So this is a power link.
04:01Now, apart from the link, if we
04:04For example, instead of this, we use a handbook field.
04:08Input field text
04:11And we give it a class name.
04:14Link
04:19And now instead of this color
04:22We change it to background.
04:38Okay.
04:41Now we have made it a background color.
04:44Now, as soon as we hover our mouse on it.
04:47So it changes its color to yellow.
04:50If we keep clicking, it will change its color to pink.
Comments