WEBVTT 0 00:00.480 --> 00:03.750 We've been talking about the valid and invalid pseudo classes. 1 00:03.750 --> 00:10.050 But now I want to quickly talk about when we're dealing with numerical data, the in-range and out-of- 2 00:10.050 --> 00:12.060 range pseudo classes. 3 00:12.060 --> 00:18.600 It's rather intuitive, but this is applicable on numerical inputs, inputs where its type are set to 4 00:18.600 --> 00:24.210 number, where a range is specified by the min and the max attributes. 5 00:24.330 --> 00:28.740 I keep mentioning input where its type is set to number, but it doesn't only apply in those instances, 6 00:28.740 --> 00:30.930 it's any numerical input. 7 00:30.930 --> 00:36.720 So inputs where its type is set to date, month, week, time, datetime-local, number and range will 8 00:36.720 --> 00:38.520 apply in these instances. 9 00:38.550 --> 00:39.120 Got it. 10 00:39.840 --> 00:40.920 Cool, cool, cool. 11 00:40.920 --> 00:41.730 Let's move on. 12 00:41.730 --> 00:47.910 And what's interesting or something that you need to bear in mind is that when an input has data that's 13 00:47.910 --> 00:53.970 in range, it's also going to match the valid pseudo class and vice versa. 14 00:53.970 --> 00:59.160 Inputs whose data is out-of-range will also match the :invalid pseudo class. 15 00:59.190 --> 01:00.130 What? 16 01:00.130 --> 01:01.090 Isn't that weird? 17 01:01.090 --> 01:04.560 "So then, Clyde, why do we need both?" 18 01:04.570 --> 01:09.120 Well, the short answer is semantics. 19 01:09.130 --> 01:12.580 The issue is really one of semantics. 20 01:12.670 --> 01:14.970 Out of range is more specific. 21 01:14.980 --> 01:22.210 What I mean by this is that using the out-of-range pseudo class is a more specific type of invalid communication. 22 01:22.210 --> 01:28.240 So you might want to provide a different message for out-of-range inputs which will be more helpful 23 01:28.240 --> 01:31.390 to users than just saying invalid, for example. 24 01:31.390 --> 01:35.200 And if you are a bit confused, let me just jump over to the text editor. 25 01:35.200 --> 01:39.810 You know we've been dealing with this form, the sign up form, first name, last name and an email. 26 01:39.820 --> 01:44.950 Well, why don't we remove the email, replace that with some numerical input type like age, and let's 27 01:44.950 --> 01:46.590 say it needs to be greater than 12. 28 01:46.600 --> 01:50.950 Well, in that instance, let's start using the in-range pseudo class. 29 01:50.950 --> 01:56.020 You'll see that the :valid also applies and how we can use them both. 30 01:56.020 --> 01:58.030 So let's hop over to the text editor now. 31 01:58.180 --> 01:58.960 For real 32 01:58.960 --> 01:59.710 for real. 33 01:59.710 --> 02:03.100 I'm literally just about done with my coffee. 34 02:03.500 --> 02:04.930 Oh, I'm going to have to get another one soon. 35 02:04.930 --> 02:07.870 But anyway, here is our call sign up form. 36 02:07.870 --> 02:10.990 And as you know, we've got first name, last name, and then email. 37 02:10.990 --> 02:15.670 But I want to show you now an example where we can target the out-of-range pseudo class. 38 02:15.670 --> 02:20.650 And you'll see, once you understand these concepts, whether we are just targeting one pseudo class versus 39 02:20.680 --> 02:24.460 another, it really doesn't matter and you'll see how easy and intuitive it is. 40 02:24.460 --> 02:29.590 So let's just use this form because we've come such a long way and get rid of the email and let's put 41 02:29.590 --> 02:36.210 in a input of type number, because now we want to work with in -range and out-of-range numbers, data. 42 02:36.220 --> 02:41.710 So we're going to just quickly amend our HTML and then add a little bit of CSS and you'll see that it's 43 02:41.710 --> 02:42.460 going to be really cool. 44 02:42.460 --> 02:46.210 And then in terms of giving an error message, why don't we do something different? 45 02:46.240 --> 02:52.870 Why don't we actually say something like access denied or, you know, you've been denied access or 46 02:52.870 --> 02:56.230 something like that rather than just a cross. 47 02:56.230 --> 02:57.420 So let's get cracking. 48 02:57.430 --> 03:02.860 So here we are, we are at our div, where we've wrapped the email control. We don't want the email control 49 03:02.860 --> 03:03.670 anymore, right? 50 03:03.670 --> 03:05.770 So we save this and it's gone. 51 03:05.770 --> 03:07.900 All I want to do now is I want to have a label. 52 03:08.170 --> 03:10.420 Always good to get used to putting labels everywhere. 53 03:10.510 --> 03:14.160 And here we're just going to ask for an age, right? 54 03:14.170 --> 03:16.960 And we'll say must be 12 or higher. 55 03:17.590 --> 03:18.040 I don't know. 56 03:18.040 --> 03:19.780 I just can't think of anything else right now. 57 03:19.780 --> 03:24.610 So age, the simplest. And then let's just include now an input 58 03:24.610 --> 03:28.180 but now I want to type set to number. 59 03:29.360 --> 03:30.080 Name, 60 03:30.080 --> 03:31.250 we can give "age". 61 03:31.250 --> 03:36.350 And the ID, of course, has to match the value of that for attribute, which is also "age". 62 03:36.350 --> 03:40.610 But this time, I also want this to have a required attribute. 63 03:40.610 --> 03:46.610 And look how cool this is because as we save, it gets exactly the same styling as everything else. 64 03:46.610 --> 03:51.860 How awesome! And why doesn't it have the check, the cross? 65 03:51.890 --> 03:53.300 Why is that not happening? 66 03:54.860 --> 03:56.720 Well, it's because we don't have a span, right? 67 03:56.750 --> 03:57.700 If we include the span, 68 03:57.710 --> 03:58.280 there we go. 69 03:58.280 --> 03:59.990 It looks like any other input. 70 03:59.990 --> 04:02.360 And of course, any number now will work. 71 04:02.360 --> 04:08.090 And as you can see, these input controls have the up and down arrow by default, and then the check is 72 04:08.090 --> 04:08.810 displaying over it. 73 04:08.810 --> 04:10.460 It's quite annoying. 74 04:10.460 --> 04:16.970 So why don't we just push those check marks and the crosses to the right of the box? 75 04:17.330 --> 04:19.010 Let's get to our code here. 76 04:20.290 --> 04:22.270 Remember, we've got absolute positioning. 77 04:22.270 --> 04:25.760 Well, instead of it being pushed to the left, why don't we push it to the right? 78 04:25.780 --> 04:27.040 Let's try 10. 79 04:27.790 --> 04:28.900 No, bit more. 80 04:29.290 --> 04:30.190 15. 81 04:30.310 --> 04:30.990 There we go. 82 04:31.000 --> 04:32.380 Any number now will work. 83 04:33.430 --> 04:34.480 Yeah, that works. 84 04:34.480 --> 04:35.180 That works. 85 04:35.200 --> 04:36.130 Still looks nice. 86 04:36.890 --> 04:38.240 So there we go. 87 04:38.240 --> 04:43.070 We've added our span, our inputs, but I want to add some constraints here. 88 04:43.520 --> 04:49.190 So let's just say, min attribute can be set to what, 12 and the max? 89 04:49.190 --> 04:53.260 Let's say we don't want people over 100 years old on our site. 90 04:53.270 --> 04:54.560 Actually, you know what? 91 04:55.160 --> 04:56.300 People do reach that. 92 04:56.300 --> 04:58.160 Let's say 150. 93 04:58.190 --> 04:58.910 There we go. 94 04:59.330 --> 05:00.320 Let's refresh. 95 05:00.320 --> 05:05.930 And now if a user types in, say, 5, we are still invalid, but as soon as 96 05:06.640 --> 05:11.170 they use these toggles, we've got a minimum of 12 and we get a valid state. 97 05:11.170 --> 05:13.000 So here we are targeting the valid state. 98 05:13.000 --> 05:17.800 It is working, but an alternative is to use out-of-range. 99 05:17.890 --> 05:18.820 What do I mean? 100 05:18.820 --> 05:25.720 I mean, we can target the input, but now specifically target the state where the number is out of 101 05:25.720 --> 05:26.290 range. 102 05:26.290 --> 05:33.940 In other words, it's either below 12 or more than 150, and we can basically do exactly the same concept. 103 05:33.940 --> 05:35.350 We can target the span, 104 05:35.380 --> 05:38.080 this time it's ::after pseudo element. 105 05:38.130 --> 05:41.350 We know what, we could even target the ::before pseudo element. 106 05:41.990 --> 05:49.260 And here we want content to be, "Sorry, denied entry". 107 05:49.280 --> 05:51.630 So if we are out of range, let' do 5, 108 05:51.650 --> 05:52.190 we've got 109 05:52.190 --> 05:52.760 Sorry, 110 05:52.790 --> 05:53.960 denied entry. 111 05:53.990 --> 05:54.770 You know what? 112 05:54.770 --> 05:57.290 I actually don't want to target the ::before pseudo element. 113 05:57.290 --> 05:59.170 I want to replace the word required. 114 05:59.180 --> 06:00.740 Can you see the word required there? 115 06:00.950 --> 06:05.990 So why don't we actually target the ::after pseudo class and let's put the number five. 116 06:06.020 --> 06:06.710 There we go. 117 06:06.710 --> 06:08.210 So at least that has changed. 118 06:08.210 --> 06:08.810 Sorry, 119 06:08.840 --> 06:10.100 denied entry. 120 06:10.460 --> 06:11.750 Well, let's just put "access 121 06:11.750 --> 06:13.430 denied". access 122 06:15.600 --> 06:19.170 denied. And let's put 160. 123 06:19.450 --> 06:20.220 Access denied. 124 06:20.250 --> 06:20.700 There we go. 125 06:20.700 --> 06:21.570 That's pretty cool. 126 06:22.080 --> 06:28.080 The color we want white, but it is white already. Width, 100px. 127 06:28.180 --> 06:28.530 Right. 128 06:28.530 --> 06:29.640 Let's put 5. 129 06:30.630 --> 06:32.100 At least now it's fitting nicely. 130 06:32.130 --> 06:33.780 Maybe 100 pixels is too much. 131 06:34.560 --> 06:35.490 Let's do 80. 132 06:36.700 --> 06:37.600 Yeah, that's better. 133 06:38.050 --> 06:39.010 Background color 134 06:40.270 --> 06:41.130 can be red. 135 06:41.570 --> 06:42.540 Yeah, that's fine. 136 06:42.570 --> 06:43.200 8. 137 06:43.230 --> 06:44.280 Access denied. 138 06:44.310 --> 06:45.150 There we go. 139 06:45.600 --> 06:47.190 Actually, the width can even be less. 140 06:47.220 --> 06:48.300 Should we try 50? 141 06:50.140 --> 06:50.860 70. 142 06:52.610 --> 06:53.070 There we go. 143 06:53.090 --> 06:53.870 That looks fine. 144 06:54.610 --> 06:55.580 I want to push it, 145 06:55.820 --> 06:56.840 push it left. 146 06:57.530 --> 06:58.460 So let's do that. 147 07:00.240 --> 07:01.590 Push it left 80. 148 07:03.200 --> 07:04.340 I think that looks cool. 149 07:04.550 --> 07:05.810 How awesome is this? 150 07:05.840 --> 07:06.890 Can you see how cool it is? 151 07:06.890 --> 07:11.960 So now we've got obviously different styling applied to different things. That's required. If this is 152 07:11.960 --> 07:19.700 now invalid or if it's out of range, you know, if the user types 1 we get this "access denied". 153 07:19.730 --> 07:20.960 How awesome. 154 07:20.960 --> 07:23.390 And of course when we start going in range, 155 07:24.200 --> 07:25.070 it disappears. 156 07:26.610 --> 07:27.350 Very cool. 157 07:27.400 --> 07:28.060 So there we go. 158 07:28.150 --> 07:32.320 Very, very quick example just to show you that we don't always have to just target the valid pseudo 159 07:32.320 --> 07:32.620 class. 160 07:32.620 --> 07:37.900 We've got these others called out-of-range and of course in-range when we're dealing with numerical 161 07:37.900 --> 07:38.500 data. 162 07:38.530 --> 07:39.000 There we go. 163 07:39.010 --> 07:39.510 There we go. 164 07:39.520 --> 07:40.780 I hope it's making sense. 165 07:40.780 --> 07:45.520 And I told you, you know, it boils down mostly to semantics, but also it can be quite practical. 166 07:45.520 --> 07:51.010 I mean, in our case, we did target the out-of-range pseudo class and we gave the user a very specific 167 07:51.010 --> 07:54.250 message when it came to that being out of range. 168 07:54.400 --> 08:01.420 So there's one very useful scenario of us wanting to target the out-of-range versus only the invalid 169 08:01.450 --> 08:06.100 because the invalid pseudo class might have styling applied to all other form controls, in our case 170 08:06.100 --> 08:07.150 first name and last name. 171 08:07.180 --> 08:07.690 Okay, cool. 172 08:07.690 --> 08:08.830 You've got it, you've got it. 173 08:08.860 --> 08:12.700 There's just one more thing I want to mention, and it's a bit of a warning, but it's an obvious warning. 174 08:12.730 --> 08:16.990 You just need to understand your code when you start writing HTML. 175 08:17.110 --> 08:22.060 And I know it sounds obvious to say you need to understand your code, but you know, you really do. 176 08:22.090 --> 08:23.680 And let me ask you a question. 177 08:23.680 --> 08:29.180 What if you use both pseudo classes :required and out-of-range at the same time? 178 08:29.180 --> 08:29.900 Can you do that? 179 08:29.900 --> 08:30.830 What does it mean? 180 08:30.830 --> 08:37.670 Well, as it turns out, they work very nicely together because when the page first loads, the required 181 08:37.670 --> 08:39.770 class will be displayed right. 182 08:39.770 --> 08:42.200 In our case along with that red cross ❌ and the border. 183 08:42.200 --> 08:48.110 But when you've typed in a valid number, for example, a valid age in our case, then the input will 184 08:48.110 --> 08:49.280 turn valid. 185 08:49.310 --> 08:54.290 If, however, you then go and change the age entry to one that's out of range, then of course we show 186 08:54.290 --> 08:59.600 that custom error message to the user - access denied -and the out-of-range styling is therefore shown. 187 08:59.720 --> 09:05.000 Another thing to bear in mind is because the out-of-range rule appears later in our CSS source code, 188 09:05.000 --> 09:12.830 than the required rule, the cascading rules come into play and the out-of-range message is shown instead 189 09:12.830 --> 09:15.860 of, say, the invalid or the required styling. 190 09:15.860 --> 09:17.240 So just bear that in mind. 191 09:17.270 --> 09:17.810 Right. 192 09:17.810 --> 09:18.200 All right. 193 09:18.200 --> 09:19.700 But I think we've covered a lot. 194 09:19.730 --> 09:20.270 A lot. 195 09:20.270 --> 09:25.070 And yeah, there's still a few more things I want to mention when it comes to CSS and styling forms. 196 09:25.070 --> 09:27.860 So stick with me and I'll see you in the next lecture.