1
00:00:00,920 --> 00:00:02,630
Hello, everyone, and welcome back.

2
00:00:03,440 --> 00:00:07,250
In today's video, we will learn about pseudo classes and see Sears's.

3
00:00:08,170 --> 00:00:11,680
A single glass is used to define a special state of an element.

4
00:00:12,340 --> 00:00:17,500
If you remember this code, we learned about this in the video that we saw how to add style to things

5
00:00:18,160 --> 00:00:18,550
we use.

6
00:00:18,550 --> 00:00:26,520
This properties call Ming Golden, a dead golden Hoover and Golden acted to style different states of

7
00:00:26,550 --> 00:00:27,370
art links.

8
00:00:27,820 --> 00:00:30,190
This golden something is called pseudo glass.

9
00:00:30,760 --> 00:00:34,450
They provide us access to different states of deman elements.

10
00:00:34,930 --> 00:00:35,770
These are all this.

11
00:00:35,770 --> 00:00:37,790
You look losses are really willing to assist.

12
00:00:38,200 --> 00:00:40,260
Some of these are for links.

13
00:00:40,660 --> 00:00:43,660
Some are specific for input elements and rest.

14
00:00:43,690 --> 00:00:45,420
Others are general.

15
00:00:45,940 --> 00:00:48,610
You can use it for all the original elements.

16
00:00:48,910 --> 00:00:53,430
Let's try some of these to understand them better, saying we have to create this form.

17
00:00:54,650 --> 00:01:02,150
This disabled feed has a light gray color on when someone who was it shows this person not allowed.

18
00:01:02,940 --> 00:01:05,780
And when a female is focused, it don't like blue.

19
00:01:06,470 --> 00:01:09,050
When the focused input field is required.

20
00:01:09,140 --> 00:01:10,970
It turns this light red.

21
00:01:12,250 --> 00:01:16,430
And when someone who works on this button, it turns dark.

22
00:01:17,250 --> 00:01:21,720
Lucky for us, she also provides us with pseudo glasses to hide in these states.

23
00:01:22,170 --> 00:01:23,220
Let's try to put this.

24
00:01:23,280 --> 00:01:24,820
So let's bring about equality, too.

25
00:01:25,710 --> 00:01:26,930
Let's bring it up here.

26
00:01:28,140 --> 00:01:30,390
Now, first, let's start with this one.

27
00:01:30,720 --> 00:01:34,490
So when someone focuses on an element, it doesn't seem they do.

28
00:01:36,040 --> 00:01:37,150
So coming down here.

29
00:01:38,070 --> 00:01:39,550
So this is our input element.

30
00:01:39,900 --> 00:01:42,050
So first, let's select our input element.

31
00:01:42,580 --> 00:01:44,700
Then put it on for focus.

32
00:01:44,730 --> 00:01:47,640
We have this pseudo glassford focus.

33
00:01:48,210 --> 00:01:51,390
So focus on let's add some states.

34
00:01:51,900 --> 00:01:57,140
So when this element is focused, change the background color to light blue.

35
00:01:57,900 --> 00:01:58,580
Let's save it.

36
00:01:59,310 --> 00:02:00,480
Let's run our lives together.

37
00:02:00,570 --> 00:02:02,400
So it's demoed, right.

38
00:02:02,400 --> 00:02:04,500
Click on Open with lifeSo.

39
00:02:06,150 --> 00:02:10,230
And now when I focused, all my fields are going blue.

40
00:02:11,260 --> 00:02:13,540
OK, so let's bring about it again.

41
00:02:14,530 --> 00:02:17,290
Now, the next day has been someone who was on this disabled feed.

42
00:02:18,190 --> 00:02:21,340
It should show this not allowed close up.

43
00:02:21,910 --> 00:02:22,930
So coming in here.

44
00:02:25,550 --> 00:02:27,890
So, again, this is an input feel so close.

45
00:02:27,920 --> 00:02:29,310
Let's select the input field.

46
00:02:30,520 --> 00:02:33,230
So but I don't I'm golden.

47
00:02:33,650 --> 00:02:34,770
So even for disabled.

48
00:02:34,820 --> 00:02:36,980
We have another single class for disabled.

49
00:02:38,810 --> 00:02:41,120
Let selected let seems let go, sir.

50
00:02:41,600 --> 00:02:42,260
So go, sir.

51
00:02:42,890 --> 00:02:43,790
I'm not alone.

52
00:02:44,420 --> 00:02:44,960
Let's save it.

53
00:02:45,810 --> 00:02:48,660
And now when I hear word it shows me is not allowed.

54
00:02:48,680 --> 00:02:49,160
Gersel.

55
00:02:50,610 --> 00:02:51,960
Now, moving on to the next part.

56
00:02:53,610 --> 00:02:59,260
When I focus on these required teens, it should do like trade like this.

57
00:03:00,130 --> 00:03:01,060
So let's try this.

58
00:03:02,380 --> 00:03:04,800
So, again, let's select our input few.

59
00:03:05,260 --> 00:03:07,370
So in our case, that last name is input item.

60
00:03:09,130 --> 00:03:12,010
First, let's select when the field is focused.

61
00:03:12,980 --> 00:03:16,140
And now let's select when the field is required.

62
00:03:19,660 --> 00:03:22,400
And as you can see, I can give multiple Seelow classes.

63
00:03:22,550 --> 00:03:29,860
First, I selected all the input items which are focus, and then I selected all these focused and put

64
00:03:29,860 --> 00:03:31,260
items which are required.

65
00:03:32,970 --> 00:03:34,680
So let's change the background to live.

66
00:03:35,740 --> 00:03:37,350
So let's go to Ray gets a lift.

67
00:03:37,740 --> 00:03:41,370
And when I focus it don't Ray but the threat is very bright and dark.

68
00:03:41,520 --> 00:03:42,570
Let's make it like.

69
00:03:45,520 --> 00:03:46,810
So we use RGV.

70
00:03:47,950 --> 00:03:53,440
So first as bar, so full of red, zero green, zero blue.

71
00:03:54,600 --> 00:03:56,960
And even now, as you can see, this rate is very bright.

72
00:03:58,410 --> 00:04:02,410
So we have another color coding scheme, which is called IGB eight.

73
00:04:03,030 --> 00:04:06,540
This it helps to add some transparency.

74
00:04:07,080 --> 00:04:08,920
This eight represents Alpha.

75
00:04:09,090 --> 00:04:13,410
And we can change as well if I to handle the transparency.

76
00:04:14,400 --> 00:04:16,110
So the value goes from zero to one.

77
00:04:16,260 --> 00:04:20,550
One is the most opaque and zero is the completely transparent.

78
00:04:21,060 --> 00:04:22,410
So let's say we get rid of others.

79
00:04:22,440 --> 00:04:25,320
Point to let's save it now.

80
00:04:25,320 --> 00:04:27,500
And I hope it gives me this lightweight color.

81
00:04:28,410 --> 00:04:31,290
Similarly, if the value was a bit more Setpoint eight.

82
00:04:33,040 --> 00:04:34,950
It's a bit darker, more deeply.

83
00:04:35,800 --> 00:04:37,570
Let's just do it about dewpoint do.

84
00:04:38,990 --> 00:04:40,920
And as you can see.

85
00:04:45,880 --> 00:04:51,220
The Bosworth Field is play on the good from Bosworth Field is also required.

86
00:04:52,060 --> 00:04:53,810
So when I go with you, it goes straight.

87
00:04:54,430 --> 00:04:56,470
Similarly in this one goes to read.

88
00:04:57,550 --> 00:04:58,900
Now, we went to the last point.

89
00:04:59,300 --> 00:05:03,460
So when I who were on this button, it should get this deep look.

90
00:05:04,250 --> 00:05:05,360
So coming back here.

91
00:05:08,900 --> 00:05:10,170
So this is our second segment.

92
00:05:10,250 --> 00:05:11,690
So first, let's click the button.

93
00:05:11,960 --> 00:05:14,540
So Abedian and submit.

94
00:05:15,530 --> 00:05:22,220
Now, we wanted this auction to happen when be were so cool and we can use the Hoover Suder plus.

95
00:05:23,370 --> 00:05:26,550
And if you can notice here, the background color is given an RGV.

96
00:05:27,680 --> 00:05:29,540
And the obesity is point eight.

97
00:05:30,260 --> 00:05:33,690
So if you just change it to one, that should do the job.

98
00:05:34,400 --> 00:05:37,780
So back at Onkalo, let's see RGV.

99
00:05:38,950 --> 00:05:39,880
So let's, you know.

100
00:05:42,180 --> 00:05:42,900
Ground zero.

101
00:05:43,200 --> 00:05:47,310
Lou, full arm for the other four lectures, given the value of one.

102
00:05:47,900 --> 00:05:48,470
Let's save it.

103
00:05:49,490 --> 00:05:53,400
And now when I hope it still does not win.

104
00:05:53,490 --> 00:05:53,840
Right.

105
00:05:54,090 --> 00:05:54,510
Let's see.

106
00:05:56,970 --> 00:05:58,880
So instead of new, let's say, two, five, five.

107
00:05:59,700 --> 00:06:03,970
And as you can see now, this is going to need Lukla.

108
00:06:05,160 --> 00:06:06,140
That's all for today, guys.

109
00:06:07,050 --> 00:06:10,170
In the next video, we will explore some more of these YouTube losses.

110
00:06:10,290 --> 00:06:14,910
If there's something that you did not understand in future global comment on people discussing.

111
00:06:15,960 --> 00:06:18,280
So you in the next video by and Andy.