WEBVTT

0
00:00.530 --> 00:01.850
Back to pseudo classes.

1
00:01.850 --> 00:03.170
We're not quite finished.

2
00:03.170 --> 00:10.160
And remember by a pseudo class, I just mean it's a state that can be targeted with CSS.

3
00:10.190 --> 00:15.980
So remember, pseudo classes are used to define a state of an element.

4
00:16.010 --> 00:23.030
Specifically, they target elements that can't be targeted with traditional CSS like combinators or

5
00:23.030 --> 00:24.590
symbol selectors.

6
00:24.890 --> 00:26.150
What are combinators?

7
00:26.180 --> 00:29.690
Well, there are 4 combinators in CSS.

8
00:29.720 --> 00:35.090
A combinator is just something that explains a relationship between the selectors, right?

9
00:35.090 --> 00:40.250
So there are 4 different combinations and you've probably used all of these in CSS. They are the space, which

10
00:40.250 --> 00:43.250
just defines a descendant selector.

11
00:43.280 --> 00:47.030
We've got the plus sign, which is an adjacent sibling selector.

12
00:47.030 --> 00:51.920
We've got that little tilde key, which is a general sibling selector, so it doesn't have to be immediately

13
00:51.920 --> 00:53.540
adjacent to the one we're dealing with.

14
00:53.540 --> 00:57.020
And then of course, we've got the greater sign, which is a child selector.

15
00:57.050 --> 00:58.160
You've seen all of these

16
00:58.160 --> 01:04.220
I'm pretty sure if you've done any CSS. Then we've got simple CSS selectors.

17
01:04.250 --> 01:05.330
What are those?

18
01:05.360 --> 01:13.250
Remember that CSS selectors are just used to find aka select the HTML elements you want to style. And

19
01:13.250 --> 01:16.960
simple selectors are different from combinator selectors.

20
01:16.970 --> 01:19.970
Simple selectors are the ones that have a certain attribute.

21
01:19.970 --> 01:22.990
So actually, maybe I should have called this attribute selectors.

22
01:23.000 --> 01:30.200
They select attributes based on their class name, their name or ID. But sometimes, combinator selectors

23
01:30.230 --> 01:34.160
or simple aka attribute selectors, are not enough.

24
01:34.160 --> 01:39.470
And this is where pseudo classes come into the picture and they are a bunch of different types of pseudo

25
01:39.470 --> 01:43.460
classes such as root, target, visited valid,

26
01:43.490 --> 01:44.270
etc

27
01:44.270 --> 01:45.050
etc.

28
01:45.050 --> 01:49.730
And this is not even mentioning the bunch of pseudo elements such as ::after, ::before, ::first-line,

29
01:49.730 --> 01:50.210
etc

30
01:50.210 --> 01:50.930
etc.

31
01:50.930 --> 01:56.870
And we've seen in many examples in this course that we can not only use form controls outside of forms,

32
01:56.870 --> 02:00.500
but we can also target pseudo classes outside of forms.

33
02:00.500 --> 02:03.620
"But Clyde, this course is all about forms."

34
02:03.630 --> 02:04.590
I hear you.

35
02:04.590 --> 02:05.310
I hear you.

36
02:05.340 --> 02:07.820
So let me just jump over to the console quickly.

37
02:07.830 --> 02:14.100
Let's create an input with type checkbox, and let's style that checkbox depending on its state.

38
02:14.100 --> 02:18.930
And when you hear the word state, ding ding ding 🔔, you should think of pseudo classes.

39
02:18.930 --> 02:21.890
So let's target the :checked pseudo class.

40
02:21.900 --> 02:29.490
Let's use a CSS combinator selector and let's style the label of the checkbox.

41
02:29.520 --> 02:30.510
Let me show you.

42
02:30.990 --> 02:31.590
All right.

43
02:31.590 --> 02:33.800
Very quick example, very fun example.

44
02:33.810 --> 02:37.110
Let's just create a HTML document.

45
02:37.920 --> 02:45.480
We'll have a style section because I want to show you how we can use a CSS combinator selector.

46
02:45.510 --> 02:45.920
Okay.

47
02:45.930 --> 02:48.960
In our body, all I want is an input with type checkbox.

48
02:48.960 --> 02:51.300
That's all we want. We don't need a name.

49
02:51.300 --> 02:52.890
We're not submitting this to a server.

50
02:52.920 --> 02:54.810
The ID can just be foo.

51
02:55.840 --> 02:56.530
That's the input. 

52
02:56.530 --> 02:57.670
Let's give it a label.

53
02:57.790 --> 03:02.980
And remember now, the label in order to work has to be linked to a form control.

54
03:02.980 --> 03:09.640
We link it via this for attribute having to match the ID on the actual form control, which is foo.

55
03:10.420 --> 03:15.240
And we can just say here, toggle the checkbox on and off.

56
03:15.250 --> 03:17.140
That's all we want to do.

57
03:17.140 --> 03:19.810
And if we look at this in the browser, let's just open it up.

58
03:20.530 --> 03:21.400
There we go.

59
03:21.820 --> 03:23.830
Toggle the checkbox on and off.

60
03:23.830 --> 03:26.320
And of course if we toggle it, nothing really happens.

61
03:26.320 --> 03:27.490
Nothing exciting.

62
03:27.910 --> 03:30.100
Let me just zoom in, so we can see it a bit better.

63
03:30.100 --> 03:31.330
All right, so let's start styling.

64
03:31.330 --> 03:32.260
What what should we do?

65
03:32.290 --> 03:36.550
Well, I want to target this checkbox only when it's checked.

66
03:37.000 --> 03:37.840
How can we do that?

67
03:37.840 --> 03:45.820
Well, we can't use any traditional CSS selectors because it's a state that I'm trying to manipulate

68
03:45.820 --> 03:46.630
or style.

69
03:46.630 --> 03:48.590
And when we talk about states,

70
03:48.610 --> 03:52.000
ding, ding, ding 🔔, we must think about pseudo classes.

71
03:52.000 --> 04:00.170
So I want to grab this input element, but I only want to style whatever I want to style, when it's checked.

72
04:00.810 --> 04:06.780
And of course, that's why we have that colon there, to denote that this is a pseudo class.

73
04:06.810 --> 04:12.180
Now, if we try to style this directly, there's not much we can do because the actual input of type

74
04:12.180 --> 04:16.140
checkbox is a bad CSS control.

75
04:16.140 --> 04:18.890
And by bad I just mean it's more difficult to style.

76
04:18.900 --> 04:23.190
For example, you can't affect its background color and set it to red.

77
04:23.220 --> 04:24.120
Try and toggle this.

78
04:24.150 --> 04:25.110
It's still blue.

79
04:25.110 --> 04:27.390
The browser doesn't care what we say here.

80
04:27.390 --> 04:33.060
You can't, you know, try and affect the actual check color by making that red.

81
04:33.090 --> 04:35.160
That doesn't do anything either.

82
04:35.160 --> 04:43.050
So in this instance, what I want to do is I want to target this input when its state is set to checked,

83
04:43.050 --> 04:51.570
but then I want to use a CSS combinator selector, specifically the +, which is an adjacent sibling.

84
04:51.600 --> 04:57.750
We know that the input and label are siblings, and label is immediately following input, which is why

85
04:57.750 --> 04:59.340
we can put this + sign.

86
04:59.340 --> 05:04.530
We then grab that label. And now the label itself

87
05:04.530 --> 05:08.460
we can change its color, color to red, font weight

88
05:08.460 --> 05:09.570
let's give it bold.

89
05:09.960 --> 05:12.480
Now if we check this, look what happens.

90
05:12.480 --> 05:14.490
How awesome is this?

91
05:14.490 --> 05:15.870
And what a fun example.

92
05:15.870 --> 05:23.070
And I encourage you to start playing around with CSS, combining things like pseudo classes and traditional

93
05:23.070 --> 05:28.170
CSS selector methods, here the combinator selector +.

94
05:28.200 --> 05:29.490
Anyway, hope you're having fun.

95
05:29.490 --> 05:30.780
Let's jump back to the lecture.

96
05:30.990 --> 05:32.280
So you're following along.

97
05:32.280 --> 05:33.480
This course is all about forms.

98
05:33.480 --> 05:37.980
We're talking about pseudo classes, so why don't we talk about pseudo classes for forms?

99
05:38.340 --> 05:39.660
That's a great idea.

100
05:39.870 --> 05:47.520
Let me start off by saying input controls and other form widgets have a few unique features. And there

101
05:47.520 --> 05:54.780
are CSS pseudo class selectors that can target form controls based on their UI features.

102
05:54.780 --> 05:59.610
And these classes are known as UI pseudo-classes.

103
05:59.640 --> 05:59.960
"Okay,

104
05:59.970 --> 06:02.050
Clyde so where did it all begin?

105
06:02.080 --> 06:05.050
Who's given us access to these UI pseudo-classes?"

106
06:05.050 --> 06:10.600
Well, the original pseudo-classes were given to us by CSS 2.1.

107
06:10.600 --> 06:12.100
Which one specifically?

108
06:12.130 --> 06:16.390
Well, the ones relevant to forms are :hover, :focus and :active.

109
06:16.420 --> 06:20.260
Hover selects an element only when it's being hovered over by a mouse. Focus, 

110
06:20.260 --> 06:27.400
obviously when that element or form tab is focused. And the :active pseudo class selects an element only

111
06:27.400 --> 06:33.070
when it's being activated, aka while it's being clicked on or when the return or enter key is being

112
06:33.070 --> 06:35.830
pressed down in the case of a keyboard activation.

113
06:35.830 --> 06:38.890
But CSS 2.1 is rather old school.

114
06:38.890 --> 06:45.850
Yes, we still use :hover, :focus and :active, but the good news is that more pseudo classes have been

115
06:45.850 --> 06:53.170
given to us by more recent standards, standards like the CSS Selectors Level 3, and CSS Basic User Interface Modul

116
06:53.200 --> 06:55.300
Level 3 specifications. 

117
06:55.300 --> 07:02.380
They added more pseudo classes related to HTML forms that provide several other targeting conditions

118
07:02.380 --> 07:03.730
that you can take advantage of.

119
07:03.730 --> 07:04.210
"Like what,

120
07:04.210 --> 07:04.780
Clyde?"

121
07:05.200 --> 07:07.330
Well, we've seen some of these already - :required,

122
07:07.330 --> 07:08.470
:valid, :in-range, 

123
07:08.470 --> 07:08.890
etc

124
07:08.890 --> 07:09.370
etc.

125
07:09.400 --> 07:11.500
The opposite of required, by the way, is optional.

126
07:11.500 --> 07:13.690
We've also got the optional pseudo class.

127
07:13.690 --> 07:15.430
We've already seen many other examples.

128
07:15.430 --> 07:20.080
We've we've looked at ones that target the invalid pseudo class.

129
07:20.080 --> 07:21.430
We've got others as well.

130
07:21.430 --> 07:25.270
Examples that you've seen in this course like :checked, :indeterminate,

131
07:25.300 --> 07:31.770
we've got other pseudo classes like default, read-only, disabled, enabled, etc etc.

132
07:31.780 --> 07:34.870
They are actually just too many for me to list on the screen.

133
07:34.960 --> 07:38.290
And in this course we have looked at a lot of these already, haven't we?

134
07:38.290 --> 07:40.750
And we still going to look at these.

135
07:40.750 --> 07:45.130
When you're dealing with forms, you're going to be dealing with these all the time.

136
07:45.130 --> 07:49.750
And just to be clear, the ones I've just spoken about now are not the only pseudo classes available

137
07:49.750 --> 07:53.050
to us, but they are the most useful when it comes to forms.

138
07:53.620 --> 07:58.000
So you can tell there are many different types of UI pseudo classes.

139
07:58.000 --> 07:59.470
Hope you're having a lot of fun.

140
07:59.480 --> 08:00.730
Hope it's all making sense.

141
08:00.730 --> 08:05.560
Hope it's all coming together, and I'll see you in the very next lecture.