WEBVTT 0 00:00.570 --> 00:01.440 Woo hoo! 1 00:01.470 --> 00:04.990 We have finally finished talking about pseudo classes. 2 00:05.010 --> 00:06.840 Did you ever think we were going to get here 🤣? 3 00:06.870 --> 00:08.310 Man, oh man. 4 00:08.310 --> 00:09.480 But, well done. 5 00:09.480 --> 00:10.500 Well done for sticking with me. 6 00:10.500 --> 00:11.960 I've had a lot of fun. 7 00:11.970 --> 00:14.460 So before we finish off the section, what have we learned about? 8 00:14.490 --> 00:20.460 Well, firstly, remember we use pseudo classes whenever we want to style a state of an element. 9 00:20.460 --> 00:26.160 When you hear the word state, ding ding ding 🔔, you think about pseudo classes. And there are a number 10 00:26.160 --> 00:28.080 of pseudo classes of interest. 11 00:28.080 --> 00:34.260 But this course is all about forms, and because it's all about forms, I've had to kind of focus our 12 00:34.260 --> 00:37.170 pseudo classes on those most relevant to us. 13 00:37.170 --> 00:41.370 So all of these that you're seeing in front of you now, we've been through numerous examples in this 14 00:41.370 --> 00:44.490 course of using and targeting these states. 15 00:44.490 --> 00:48.120 So by now these are going to become second nature to you, aren't they? 16 00:48.210 --> 00:53.880 If I asked you to style a checkbox based on its checked state, all you have to do is target the checked 17 00:53.880 --> 00:56.430 pseudo class and apply CSS styling to it. 18 00:56.460 --> 00:58.770 The required is very common. 19 00:58.770 --> 01:01.330 We've seen plenty. All of them in fact. 20 01:01.450 --> 01:07.090 But you know what's frustrating is that there are many other pseudo classes, many others. 21 01:07.090 --> 01:09.670 But I don't have time in this course to go through them all. 22 01:09.670 --> 01:15.070 But the good news is that I thought, well, let me just in the summary lecture, look at a few well 23 01:15.070 --> 01:19.450 supported pseudo classes that you may want to use in your forms at some point. 24 01:19.450 --> 01:25.320 So it is still useful for us, but perhaps not as important as the others we've been used to. 25 01:25.330 --> 01:31.450 Let me grab this rock, throw it at the screen and let's first look at this focus-within pseudo class. 26 01:31.450 --> 01:37.120 This is an interesting one because it matches an element that has received focus or contains an element 27 01:37.150 --> 01:39.370 that has received focus. 28 01:39.730 --> 01:40.720 Do you get it? 29 01:41.150 --> 01:47.060 So, for example, if you had a form, you might want the whole form to highlight, to glow, to become 30 01:47.060 --> 01:49.070 a certain color, in some way 31 01:49.070 --> 01:56.300 when an input inside that form is focused, then you would target this focus-within pseudo class. 32 01:56.460 --> 01:59.810 There's also another one called focus-visible. 33 01:59.810 --> 02:00.770 What's that about? 34 02:00.800 --> 02:08.090 Well, that just matches focused elements that received focus via keyboard interaction rather than touch 35 02:08.090 --> 02:08.870 or mouse. 36 02:09.140 --> 02:15.500 This might be useful if you want to show a different style for keyboard focus compared to mouse focus, 37 02:15.500 --> 02:16.460 for example. 38 02:16.460 --> 02:22.280 And another well known pseudo class is placeholder-shown. 39 02:22.850 --> 02:28.070 This pseudo class matches inputs and textarea elements that have their placeholder showing because 40 02:28.070 --> 02:30.650 the value of the element is empty. 41 02:30.680 --> 02:36.440 We've actually seen a few examples in this course already where we used this pseudo class. 42 02:36.470 --> 02:38.000 Very, very useful. 43 02:38.000 --> 02:42.290 So these are 3 very well supported pseudo classes. 44 02:42.290 --> 02:47.480 The focus-within, the focus-visible and the placeholder-shown pseudo classes. 45 02:47.480 --> 02:49.840 These states are very well supported by browsers. 46 02:49.850 --> 02:55.490 There are others though, and there's some very good ones out there, but perhaps they are not as well 47 02:55.490 --> 02:58.850 supported by all browsers, at least at the time of this recording. 48 02:58.850 --> 03:04.040 So before we finish off, let me just look at some of these less well supported pseudo classes. 49 03:04.040 --> 03:04.670 What are they? 50 03:06.170 --> 03:13.520 Well, firstly we've got blank, and we've got empty. Basically both of these match empty form controls. 51 03:13.600 --> 03:16.900 What is the difference then, if they both match empty form controls? 52 03:16.910 --> 03:20.660 Well, I guess empty is more in depth. 53 03:20.660 --> 03:22.670 It also matches elements that have no children. 54 03:22.670 --> 03:29.240 But even more than this, it matches other empty elements like <br> and <hr>, that's blank and empty. 55 03:29.240 --> 03:37.040 And last but not least, we've got this user-invalid pseudo class. And when it is supported, it's very 56 03:37.040 --> 03:42.110 similar to the invalid pseudo class but with better user experience. 57 03:42.110 --> 03:48.320 If the value is valid when the input receives focus, the element may match invalid as the user enters 58 03:48.320 --> 03:48.710 data 59 03:48.710 --> 03:55.820 if the value is temporarily invalid, but it's only going to match user-invalid when the element loses 60 03:55.820 --> 04:01.940 focus and this can be better UI. And if the value was originally invalid it will match both the invalid 61 04:01.940 --> 04:05.750 and the user-invalid pseudo classes for the whole duration of the focus. 62 04:05.750 --> 04:10.700 And of course in that instance in a similar manner to invalid, it's going to stop matching user-invalid 63 04:10.700 --> 04:11.180 state. 64 04:11.180 --> 04:18.500 And similarly to when we use invalid, it's going to stop matching the user-invalid state when the value 65 04:18.530 --> 04:20.150 does finally become valid. 66 04:20.150 --> 04:20.960 So there you go. 67 04:20.960 --> 04:26.000 These 3 pseudo classes are interesting, but perhaps yet not as well supported in browsers as I 68 04:26.000 --> 04:26.600 speak. 69 04:26.750 --> 04:29.660 Well done for getting to the end of this section. 70 04:29.660 --> 04:30.980 Well done for sticking with me. 71 04:30.980 --> 04:32.060 I know we've been through a lot. 72 04:32.060 --> 04:36.080 I know you've had to endure a lot of code with me, but seriously, well done. 73 04:36.080 --> 04:37.190 It's only going to help you. 74 04:37.190 --> 04:38.090 I hope you had a lot of fun. 75 04:38.090 --> 04:42.080 I hope you're still having a lot of fun and I can't wait to get into the next section.