WEBVTT 0 00:00.800 --> 00:02.480 I've still got my coffee ☕, by the way. 1 00:02.510 --> 00:04.160 I'm really, really enjoying it. 2 00:04.550 --> 00:06.040 I hope you're having a lot of fun. 3 00:06.050 --> 00:08.670 Remember to smile ☺. Remember to enjoy what you do. 4 00:08.690 --> 00:09.590 Life is short. 5 00:09.830 --> 00:12.320 So anyway, we're picking up on this form we started. 6 00:12.320 --> 00:18.540 But as I mentioned, we don't just want a color indication to a user. 7 00:18.560 --> 00:19.780 What about if they are colorblind? 8 00:19.790 --> 00:24.650 So it is good practice on required fields to either have an asterisks or the word required. 9 00:24.650 --> 00:25.850 I like the word required. 10 00:25.850 --> 00:26.870 I just prefer it. 11 00:26.900 --> 00:28.300 How can we do that? 12 00:28.310 --> 00:29.030 Many ways. 13 00:29.030 --> 00:36.740 But one way, as I mentioned, is to produce generated content using the ::before and ::after pseudo classes. 14 00:36.740 --> 00:39.460 Sorry, the ::before and ::after pseudo elements. 15 00:39.470 --> 00:42.050 Now, there is a slight nuance. 16 00:42.260 --> 00:44.690 Let me just go down to our HTML. 17 00:45.290 --> 00:51.070 You know, you'd think you could just target our input and then the pseudo element of ::after and ::before. 18 00:51.080 --> 00:57.410 I wish it were that simple, but let me do a comment here below the input and I specifically want to 19 00:57.410 --> 00:58.490 do generated content here. 20 00:58.490 --> 01:03.030 I want to show you how to target the ::before and ::after pseudo elements in order to add content. 21 01:03.450 --> 01:06.930 Unfortunately, and this is what I didn't mention in the lecture, 22 01:08.160 --> 01:09.390 unfortunately, 23 01:10.830 --> 01:17.010 input elements do not support generated content. 24 01:17.010 --> 01:19.320 And I think we discussed this a long time ago. 25 01:19.350 --> 01:25.950 I think it was actually in relation to the textarea element, if I'm correct, that they are kind of treated 26 01:25.950 --> 01:31.410 like CSS replaced elements, in the sense that we can't add the ::before and ::after pseudo elements to them. 27 01:31.410 --> 01:32.430 Nothing will happen, right? 28 01:32.460 --> 01:35.250 So unfortunately, input elements do not support generated content. 29 01:35.250 --> 01:39.750 So let's include a span element 30 01:41.090 --> 01:42.920 to wrap 31 01:43.470 --> 01:44.460 the 32 01:45.710 --> 01:47.870 generated content onto. 33 01:48.170 --> 01:49.360 Is it kind of making sense? 34 01:49.370 --> 01:56.600 So all I want to do, is I want to include now right below our input, a span element, an empty span element. 35 01:56.600 --> 02:00.620 And of course I want to do that on both inputs, right? 36 02:00.650 --> 02:04.550 We've done it on the one, and now I want to do it on the last name as well. 37 02:04.550 --> 02:05.000 So there we go. 38 02:05.000 --> 02:05.810 I've got two spans. 39 02:05.810 --> 02:10.070 Obviously nothing happens on our page because we haven't put anything in the span. 40 02:10.490 --> 02:11.630 How do we do that? 41 02:11.660 --> 02:13.210 Well, it's very, very easy. 42 02:13.240 --> 02:20.000 First thing I want to do is I want to make this span element a "relative" element. 43 02:20.240 --> 02:26.600 And I want to do that because when we produce our generated content, I want to set that position property 44 02:26.600 --> 02:27.500 to absolute. 45 02:27.500 --> 02:32.210 And when you think of absolute positioning, it gives us a lot of control, but it's got to be absolute 46 02:32.210 --> 02:37.550 to something and that something is a parent that has its position 47 02:37.550 --> 02:42.260 property set to relative. And its parent here is going to be the span itself. And we could just target 48 02:42.260 --> 02:42.830 the span, 49 02:42.830 --> 02:43.100 okay. 50 02:43.100 --> 02:44.630 But I want to show you other ways to do it. 51 02:44.630 --> 02:47.630 I want to show you how you can start using CSS combinators. 52 02:47.640 --> 02:53.010 Let's start off at our input, and we know the immediately adjacent sibling 53 02:53.800 --> 02:55.690 is this span. 54 02:56.170 --> 02:57.490 So that's what I'm targeting here. 55 02:57.490 --> 03:01.480 And if you hover over it, the IDE actually gives us clues. 56 03:01.480 --> 03:05.500 It tells you that we're targeting the span that is immediately after that input. 57 03:05.770 --> 03:06.580 Quite useful. 58 03:06.610 --> 03:09.280 And that's what that + combinator means, by the way. 59 03:09.370 --> 03:13.830 And all I want to do here is I want to set its position property to relative. 60 03:13.840 --> 03:14.860 That's all I want to do. 61 03:15.430 --> 03:17.320 It really is that simple. 62 03:17.320 --> 03:19.210 Next, I want to be very explicit. 63 03:19.210 --> 03:26.170 Let's target that span and let's target now the pseudo element ::after - the ::after pseudo element. 64 03:26.200 --> 03:26.980 How do we do that? 65 03:26.980 --> 03:32.500 Well, firstly, again, we can do this more simply, but I want to show you how to start using CSS 66 03:32.500 --> 03:34.060 combinators and selectors. 67 03:34.240 --> 03:41.830 Firstly, we only want this to affect input elements that have a required attribute on them, right? 68 03:41.860 --> 03:44.170 We don't want this to affect the email. 69 03:44.590 --> 03:46.390 Maybe we put a span there by mistake. 70 03:46.390 --> 03:48.820 We don't want that to be a required field. 71 03:49.120 --> 03:54.710 Next we're going to use this adjacent sibling, because we're targeting the span, but this time we want 72 03:54.710 --> 03:57.680 to target the ::after pseudo element. 73 03:58.220 --> 04:02.780 Remember the ::after pseudo element, it creates items, but you can't see it in the DOM. 74 04:02.780 --> 04:05.720 It doesn't really exist on the page, so we can't copy it. 75 04:05.750 --> 04:07.430 We can't select it with the mouse. 76 04:07.430 --> 04:10.610 It really is only there for visual purposes. 77 04:10.610 --> 04:12.380 So let's see how this works. 78 04:12.380 --> 04:16.250 Firstly, I want to set its position property to what? 79 04:16.910 --> 04:17.840 To absolute. 80 04:17.870 --> 04:18.530 Exactly. 81 04:18.530 --> 04:20.930 And it's going to be now absolute to that span. 82 04:21.020 --> 04:21.530 Okay. 83 04:21.560 --> 04:29.060 The next thing is we have to affect this content property and I want the word required. And you can see 84 04:29.060 --> 04:29.810 it on the browser 85 04:29.810 --> 04:31.820 my dear students, how awesome is this? 86 04:31.820 --> 04:32.540 Yeah! 87 04:35.600 --> 04:37.310 That is cool, but it just looks ugly. 88 04:37.460 --> 04:38.990 So now we got to think about styling. 89 04:39.530 --> 04:41.720 Firstly, I want the font-size a bit reduced. 90 04:41.870 --> 04:43.070 0.7, 91 04:43.100 --> 04:43.760 how's that? 92 04:44.330 --> 04:46.700 Oh, I forgot the semicolon at the end 🙈! I thought 93 04:46.700 --> 04:47.930 what is going on here? 94 04:47.960 --> 04:51.650 Let's give it a background color of black. 95 04:52.680 --> 04:53.910 But now we can't see the word. 96 04:53.910 --> 04:56.550 So let's give the word a white font. 97 04:56.580 --> 04:57.210 There we go. 98 04:57.300 --> 04:58.410 Oh, it needs padding hey. 99 04:58.620 --> 04:59.800 That looks terrible. 100 04:59.820 --> 05:01.980 Padding, 5 and 10. 101 05:02.010 --> 05:03.120 Does that look nice? 102 05:03.690 --> 05:04.640 Man, that looks cool. 103 05:04.650 --> 05:05.790 I actually quite like that. 104 05:05.790 --> 05:07.290 I actually quite like that. 105 05:07.290 --> 05:12.180 But, now because we set this positioning to absolute, we have a lot of control. 106 05:12.180 --> 05:16.920 For example, we can push this up by affecting the top property. 107 05:18.000 --> 05:19.500 Let's try 35 pixels. 108 05:19.530 --> 05:21.870 We can also push it left. 109 05:22.020 --> 05:25.140 I think 60 pixels will work. 110 05:25.350 --> 05:27.640 I think this is coming on quite nicely, don't you? 111 05:27.660 --> 05:28.860 You know what I want to do? 112 05:28.890 --> 05:29.970 It's not quite aligning. 113 05:29.970 --> 05:36.300 And I guess part of the reason just thinking about it is that the label element is not block by default. 114 05:36.300 --> 05:38.610 It's actually inline, and that can cause a few issues. 115 05:38.610 --> 05:41.340 So why don't I just go to our label, 116 05:41.400 --> 05:44.070 I don't know if this will solve the issue, but it should help. 117 05:44.340 --> 05:45.690 Display block. 118 05:46.160 --> 05:47.570 Yeah, there you go. 119 05:47.580 --> 05:48.990 It's already looking a bit better. 120 05:49.020 --> 05:49.560 You know what, 121 05:49.560 --> 05:50.790 I actually think that's fine. 122 05:50.790 --> 05:54.450 I mean, we could bring it slightly, slightly down. 123 05:56.640 --> 05:58.170 Let's go down here. 124 06:00.810 --> 06:02.740 Maybe we can do 32 pixels. 125 06:02.760 --> 06:03.600 How's that? 126 06:03.990 --> 06:05.050 I think that looks fine. 127 06:05.080 --> 06:07.380 You know, maybe this is stretching too much. 128 06:07.590 --> 06:12.720 So maybe what we can do, is make the fieldset width 30%. 129 06:13.200 --> 06:13.770 How does that look? 130 06:13.800 --> 06:15.650 It probably looks fine, but there you go. 131 06:15.660 --> 06:16.760 You can play around with it. 132 06:16.770 --> 06:22.170 But this is just a better way to do things, my dear students. As I mentioned, because it's a pseudo 133 06:22.170 --> 06:24.150 element we can't select this required. 134 06:24.150 --> 06:27.900 We can't highlight it in any way, but visually it makes sense, right? 135 06:27.900 --> 06:31.890 It's telling the user that these two fields are required. 136 06:32.280 --> 06:34.200 "So is this done then, Clyde?" 137 06:34.770 --> 06:38.610 Well, unfortunately, it's not quite perfect. 138 06:38.790 --> 06:42.510 There's still something that I think we should add in order to improve on this form. 139 06:42.510 --> 06:49.140 But in order for me to tell you that I first want to hop over to another lecture to discuss yet another 140 06:49.140 --> 06:50.550 type of pseudo class. 141 06:50.700 --> 06:52.620 See you in the next lecture.