WEBVTT 0 00:00.140 --> 00:00.380 Right, 1 00:00.380 --> 00:02.240 so that's the checked pseudo class. 2 00:02.270 --> 00:09.120 We've then got this :default state and this matches radios and checkboxes that are checked by default. 3 00:09.140 --> 00:11.160 In other words, on the page load. 4 00:11.180 --> 00:17.510 But what's interesting is that this is going to match the default pseudo class, even if the user later 5 00:17.510 --> 00:19.670 unchecks that box. 6 00:19.700 --> 00:24.570 What! I know, it sounds a bit strange, but let me hop over to our text editor, 7 00:24.590 --> 00:28.460 let's take the code we just looked at when we were looking at the checked pseudo class and let's add 8 00:28.460 --> 00:30.820 this default state and let me show you what I mean. 9 00:30.830 --> 00:31.820 So, here we are, 10 00:31.820 --> 00:35.840 we are at our previous example, you saw this when we were talking about the checked state. 11 00:35.870 --> 00:40.810 Now I want to show you how we can use the default state and access the default pseudo class. 12 00:40.820 --> 00:47.060 Let's say we want to set, I don't know, banana as the default selection and we want the word default 13 00:47.090 --> 00:48.190 by this banana. 14 00:48.200 --> 00:49.400 How can we do that? 15 00:50.400 --> 00:51.390 Very simple. 16 00:52.080 --> 00:56.490 All I want to do, I want to have a span element. 17 00:56.490 --> 00:58.290 So let's just say here we've got a span. 18 00:59.030 --> 01:03.590 Later on, we can choose whichever radio button we want to have this default on. 19 01:03.590 --> 01:07.130 So I'm going to put an empty span element in every single one. 20 01:07.250 --> 01:08.840 I just want to show you different ways to do things. 21 01:08.840 --> 01:09.980 That's why I'm doing it. 22 01:10.190 --> 01:14.150 And how do we use this default pseudo class? 23 01:14.150 --> 01:15.020 How does it work? 24 01:15.020 --> 01:16.430 Well, let me show you. 25 01:17.180 --> 01:19.850 I want to access these spans. 26 01:21.080 --> 01:22.970 Yes, we can just access it like this. 27 01:23.000 --> 01:23.240 Okay. 28 01:23.240 --> 01:28.190 But I don't want to. I want to show you a more precise and more specific way. We can access our input 29 01:28.190 --> 01:28.990 element. 30 01:29.000 --> 01:35.210 And of course, then we want a general sibling of this input where it's sibling is span. 31 01:35.210 --> 01:39.650 And if we hover over this, what's really cool with the IDE is it shows us that we're targeting this input 32 01:39.650 --> 01:41.000 and one of its siblings, 33 01:41.000 --> 01:42.890 it doesn't have to be immediately adjacent, 34 01:42.890 --> 01:48.680 that's why we're not using the +, by the way, we're using this tilde (~), a general sibling. 35 01:48.680 --> 01:49.550 So there we go. 36 01:49.550 --> 01:51.650 We are accessing this span. 37 01:52.430 --> 01:57.350 I first want to set its position property to relative. 38 01:57.560 --> 01:58.620 That's the first thing I want to, 39 01:58.880 --> 02:03.530 well, pretty much the only thing I actually want to do. Because now it allows us to access the input 40 02:03.830 --> 02:12.380 but now I want to target the default pseudo class and I want to access its general sibling of span and 41 02:12.380 --> 02:16.310 I want to affect the styling in the ::after pseudo element. 42 02:16.310 --> 02:19.070 I want the content to be default. 43 02:19.890 --> 02:23.190 But now if we save this and we go to the browser, nothing happens. 44 02:23.190 --> 02:25.050 And the reason nothing happens is why? 45 02:26.060 --> 02:26.770 100%. 46 02:26.780 --> 02:31.460 We haven't told the browser which radio button should be the default. 47 02:31.670 --> 02:33.020 And it's very, very easy. 48 02:33.020 --> 02:39.210 In order to do so, all we have to do on the input element itself is include the checked attribute. 49 02:39.230 --> 02:41.000 It really, really is this simple. 50 02:41.000 --> 02:42.410 And if we go to the browser now. 51 02:42.470 --> 02:43.280 There we go. 52 02:43.280 --> 02:46.400 We've got banana and then we've got that word default. 53 02:46.430 --> 02:49.100 Let me just put it side by side to coding editor. 54 02:49.840 --> 02:50.290 Right. 55 02:50.290 --> 02:55.750 So our content of default is working, but I just want to style it a bit differently because now users 56 02:55.750 --> 02:59.020 might think we're trying to say banana default, which is not the case. 57 02:59.200 --> 03:01.780 Let's give it a background color of black. 58 03:02.490 --> 03:04.530 Let's give it a color of white. 59 03:04.560 --> 03:05.610 What does that look like? 60 03:05.640 --> 03:06.330 There we go. 61 03:06.360 --> 03:08.160 Maybe some padding would be good. 62 03:08.550 --> 03:14.100 5 pixels to the top and bottom and 10 pixels to the right and left. 63 03:15.400 --> 03:17.350 Yeah, I think that's looking quite cool. 64 03:18.130 --> 03:23.020 We can also move it around because, well, actually, first we have to set its position property to ... 65 03:23.020 --> 03:25.060 not inherit, to absolute. 66 03:25.390 --> 03:29.920 Right. Now we can move it around so we can push it to the right. 67 03:31.280 --> 03:32.570 I think that's really cool. 68 03:32.660 --> 03:33.560 I actually think that's fine. 69 03:33.560 --> 03:34.510 I actually think that's fine. 70 03:34.520 --> 03:34.910 You know what? 71 03:34.910 --> 03:35.570 It's a bit big. 72 03:35.570 --> 03:36.110 It's a bit big. 73 03:36.110 --> 03:38.600 So let me just decrease its font size. 74 03:40.690 --> 03:41.650 Yeah, that's cool. 75 03:41.650 --> 03:45.580 And then I just want to push it down slightly. 76 03:46.710 --> 03:47.970 Top can be minus 77 03:48.000 --> 03:49.530 should we try 4 pixels? 78 03:49.650 --> 03:50.400 There we go. 79 03:50.490 --> 03:52.210 How awesome is that? 80 03:52.230 --> 03:59.280 But remember in the lecture, I said that even when the user later checks another radio button, that 81 03:59.280 --> 04:02.910 default pseudo class is still going to be activated. 82 04:02.910 --> 04:07.290 So if the user clicks strawberry, that default is still there. 83 04:07.320 --> 04:13.410 That styling still applies to the original element that we set that checked attribute on. 84 04:13.440 --> 04:14.160 Have you got it? 85 04:14.190 --> 04:15.300 This is making sense. 86 04:15.690 --> 04:16.230 Cool. 87 04:16.230 --> 04:17.430 Let's jump back to the lecture.