WEBVTT 0 00:00.200 --> 00:03.770 And last but not least, we've got this indeterminate state. 1 00:03.770 --> 00:10.280 And this indeterminate state applies when radios and checkboxes are neither checked nor unchecked. 2 00:10.850 --> 00:11.690 Weird, right? 3 00:11.720 --> 00:18.680 In those instances, they are considered indeterminate and they will therefore match the indeterminate 4 00:18.680 --> 00:19.610 pseudo class. 5 00:19.610 --> 00:21.820 So what elements can be indeterminate? 6 00:21.830 --> 00:23.840 Well, we've already seen the progress element, right? 7 00:23.840 --> 00:29.930 And when the progress element does not have a value attribute, the indeterminate pseudo class will 8 00:29.930 --> 00:30.860 match that. 9 00:30.860 --> 00:34.100 We can also use this indeterminate state on radio buttons and checkboxes. 10 00:34.100 --> 00:35.510 How does it work with radio buttons? 11 00:35.510 --> 00:41.510 Well, when all the radio buttons in the same name group are unchecked, then the indeterminate state 12 00:41.510 --> 00:42.320 will apply. 13 00:42.320 --> 00:49.220 When we're talking about checkboxes, you can actually put an indeterminate property or an attribute 14 00:49.220 --> 00:52.070 on that input and you can set its value to true. 15 00:52.100 --> 00:53.120 When you do that 16 00:53.120 --> 00:56.540 then again, the indeterminate pseudo class will apply. 17 00:56.570 --> 00:58.400 But actions speak louder than words. 18 00:58.400 --> 01:04.260 So why don't we go back to our code that we've been dealing with, and let me show you how this indeterminate 19 01:04.260 --> 01:08.280 pseudo class can be accessed when it comes to our radio buttons. 20 01:08.550 --> 01:16.260 So we've looked at the checked pseudo class, or the state, we've looked at the default pseudo class 21 01:16.260 --> 01:17.640 and the default state. 22 01:17.670 --> 01:21.450 The final thing I want to look at is this indeterminate state. 23 01:21.480 --> 01:22.590 What is that all about? 24 01:22.620 --> 01:27.570 Well, firstly, in order for the indeterminate state to work, we are not allowed to have a default, 25 01:27.570 --> 01:27.810 right? 26 01:27.810 --> 01:30.420 We're not allowed to have a checked state because then it is determinate. 27 01:30.420 --> 01:32.730 It's not in an indeterminate state. 28 01:32.730 --> 01:35.550 So let's remove this checked attribute on this input. 29 01:36.090 --> 01:38.340 In other words, we don't have any default state. 30 01:38.340 --> 01:41.670 Everything is unchecked at the moment, right? 31 01:41.670 --> 01:45.270 So right now we are in an indeterminate state. 32 01:45.300 --> 01:46.350 How can I prove it to you? 33 01:46.350 --> 01:47.070 Very easily. 34 01:47.070 --> 01:51.240 Let's grab our inputs where it's type attribute is set to radio. 35 01:51.270 --> 01:57.960 I'm just being explicit here, and I want to access this indeterminate state. And to prove that it is, all 36 01:57.960 --> 02:00.690 I need to show you is that we can set the border to 2 pixels 37 02:00.690 --> 02:01.800 solid red. 38 02:01.830 --> 02:02.640 There we go. 39 02:02.640 --> 02:04.800 So we know it's in an indeterminate state. 40 02:04.830 --> 02:06.420 Why would you ever want to use it? 41 02:06.420 --> 02:07.380 I don't know. 42 02:07.380 --> 02:11.640 You could animate certain things based on the intermediate state. 43 02:11.640 --> 02:14.310 For example, let's add an animation property here. 44 02:14.340 --> 02:17.160 Let's say it takes 0.4 seconds for each animation. 45 02:17.190 --> 02:21.450 The way the animation occurs, let's just say it can happen in a linear fashion. 46 02:21.450 --> 02:23.340 It doesn't have to be ease-in or ease-out. 47 02:23.520 --> 02:27.060 We want the animation to continue indefinitely, right? 48 02:27.060 --> 02:29.460 So it's going to be an infinite animation. 49 02:29.790 --> 02:32.910 And then I want to add this other property called alternate. 50 02:33.390 --> 02:39.270 What I mean by this is that I want the animation to go from 0 to 1 and then back down from 1 to 0. 51 02:39.300 --> 02:42.270 I don't want it to go from 0 to 1, 0 to 1. 52 02:42.630 --> 02:43.710 I'll show you what I mean shortly 53 02:43.710 --> 02:45.120 if you don't, if you don't quite get it. 54 02:45.120 --> 02:48.030 And then the final thing I want to do here is I want to add keyframes. 55 02:48.030 --> 02:54.000 And in order to add keyframes, let's just give it a custom name, our keyframe, and let's just call 56 02:54.000 --> 03:00.330 it custom-pulse, just so I can show you how this pulsing animation works. In order to add keyframes, 57 03:00.330 --> 03:02.490 we use the keyframes keyword. 58 03:02.610 --> 03:06.420 We are targeting our custom-pulse here. 59 03:06.630 --> 03:07.890 That's what we're defining. 60 03:07.890 --> 03:09.930 And then we've got another keyword. 61 03:09.930 --> 03:11.370 We want to start from somewhere 62 03:11.370 --> 03:13.080 so we use the from keyword. 63 03:13.350 --> 03:15.780 And this is our starting position, right? 64 03:15.780 --> 03:18.480 We're going to start from 2 pixels, solid red. 65 03:18.480 --> 03:21.810 That's where we want the animation to start from, and we want it to go where? 66 03:22.230 --> 03:23.760 Well, let's just grow the border. 67 03:23.760 --> 03:26.040 6 pixels solid red. 68 03:26.040 --> 03:28.590 And if we save this, look at the browser. 69 03:28.590 --> 03:30.870 How awesome is that, my dear students. 70 03:31.460 --> 03:32.900 Remember I told you ... 71 03:32.940 --> 03:34.280 let's actually make it longer, 72 03:35.110 --> 03:35.950 one second. 73 03:36.820 --> 03:40.840 If we don't have this alternate value here, then look what happens. 74 03:40.840 --> 03:43.270 It just literally starts from scratch every time. 75 03:43.270 --> 03:45.010 So it's quite jarring on the eye. 76 03:45.040 --> 03:50.710 That's exactly why I put this alternate value there. And then you can play around with it. 77 03:50.710 --> 03:54.550 You know, you can say from blue and then obviously it's going to go to to red. 78 03:55.950 --> 03:56.160 Whew 😫! 79 03:56.280 --> 03:57.120 A bit irritating. 80 03:57.120 --> 03:57.870 I know, I know. 81 03:57.870 --> 04:04.500 But anyway, when a user then eventually checks a radio, it's not in the indeterminate state. 82 04:04.500 --> 04:06.260 And of course everything stops. 83 04:06.270 --> 04:07.830 So it can be quite useful. 84 04:07.830 --> 04:10.480 You know, it just depends on what you're wanting to achieve. 85 04:10.500 --> 04:11.820 Let's hop back to the lecture. 86 04:12.120 --> 04:13.190 Woo hoo! 87 04:13.200 --> 04:13.950 Well done. 88 04:13.950 --> 04:14.880 Well done. 89 04:15.150 --> 04:16.480 We've come a long way, haven't we? 90 04:16.500 --> 04:21.690 If you actually try and think back to our very first lecture, it feels yonks and yonks ago. 91 04:21.720 --> 04:22.940 I've had a lot of fun. 92 04:22.950 --> 04:23.790 I hope you have too. 93 04:23.790 --> 04:24.920 And I hope you're learning a lot. 94 04:24.930 --> 04:31.640 I hope this section about CSS, about pseudo classes, pseudo elements, I hope it's becoming more intuitive. 95 04:31.650 --> 04:36.300 I know I've had a lot of fun and I can't wait to see you in the next section. 96 04:36.300 --> 04:37.560 But you know what ... I'm actually thinking ... 97 04:37.560 --> 04:39.420 before I do, let me just give you a summary. 98 04:39.450 --> 04:43.350 Let me have one more summary lecture after this, discussing some of the things we've learned, and 99 04:43.350 --> 04:45.790 then I'll see you in the next section. 100 04:45.810 --> 04:46.560 Can't wait.