WEBVTT 0 00:00.110 --> 00:02.660 Let's look at this funny word called pseudo classes. 1 00:02.660 --> 00:03.650 What is this? 2 00:03.890 --> 00:08.510 At its crux, it's just a state that can be targeted with CSS. 3 00:08.540 --> 00:10.190 And let's start at the basics. 4 00:10.220 --> 00:12.320 What is the definition of "pseudo"? 5 00:12.350 --> 00:14.450 Well, if we Google it, there we go. 6 00:15.770 --> 00:18.140 It's something that's not genuine, 7 00:18.840 --> 00:23.550 false, a sham, spurious, almost approaching or trying to be. 8 00:23.580 --> 00:25.740 That's what "pseudo" means. 9 00:26.040 --> 00:33.090 So we can say that a pseudo class is basically a phantom state or a specific characteristic of an element 10 00:33.090 --> 00:37.990 that can be targeted with CSS. But don't get confused with pseudo elements. 11 00:38.010 --> 00:41.130 Pseudo elements are different to pseudo classes. 12 00:41.160 --> 00:46.860 A pseudo element is a phantom element that does not exist in the DOM. And we can target both 13 00:46.890 --> 00:51.870 let me be clear, when it comes to forms. We've seen examples of this. And when I say that a pseudo class 14 00:51.870 --> 00:57.030 is basically a phantom state, we know that forms mostly deal with states, right? 15 00:57.030 --> 00:59.040 Something's either required or it's not. 16 00:59.040 --> 01:00.900 It's either valid or it's not. 17 01:00.900 --> 01:02.790 It's invalid or it's not. 18 01:02.820 --> 01:09.300 These are states. But as I mentioned, sometimes we use pseudo elements with forms, especially when 19 01:09.300 --> 01:10.190 it comes to styling. 20 01:10.200 --> 01:13.830 Remember that ::before pseudo element? The ::after pseudo element? 21 01:13.950 --> 01:14.250 etc 22 01:14.250 --> 01:14.880 etc. 23 01:15.000 --> 01:18.280 Okay, so how does pseudo classes work? 24 01:18.300 --> 01:19.800 Well, it's very simple. 25 01:19.810 --> 01:24.940 Pseudo class selectors are CSS selectors with a colon preceding them. 26 01:24.950 --> 01:25.250 Right? 27 01:25.270 --> 01:31.120 So we type the selector, we type the colon, we then target the particular pseudo class we're after. 28 01:31.150 --> 01:35.980 Then we can style it with normal CSS, where we've got property:value pairs. 29 01:36.310 --> 01:38.290 You have been very, very used to this. 30 01:38.290 --> 01:44.290 For example, let's target a button and let's then target the pseudo class of :hover. 31 01:44.410 --> 01:48.550 Of course we can change its background to black when the user hovers over it, for example. 32 01:48.580 --> 01:51.940 But that hover pseudo class, there are tons of them. 33 01:51.940 --> 01:53.350 Link, visited, active, target 34 01:53.350 --> 01:53.680 valid, 35 01:53.680 --> 01:54.280 etc 36 01:54.280 --> 01:54.970 etc. 37 01:54.970 --> 01:57.970 We have seen tons of these already in the course. 38 01:57.970 --> 02:00.700 It's just nice to refresh our memory now and again. 39 02:00.850 --> 02:08.170 Let me just hop over to the console and let's do a fun little example of using a pseudo class to display 40 02:08.170 --> 02:09.910 a hidden paragraph. 41 02:10.210 --> 02:11.410 You know the drill by now. 42 02:11.410 --> 02:12.520 We've got a blank file here. 43 02:12.520 --> 02:14.770 Let's just create an HTML document. Within here, 44 02:14.770 --> 02:19.240 let's have a head and style section, because we're going to be targeting CSS pseudo classes. 45 02:19.240 --> 02:21.850 But first, let's create our actual content. 46 02:21.880 --> 02:28.540 Let's create a div and in here we can say, hover over me and see what you find. 47 02:29.550 --> 02:31.230 And then we can have a paragraph: 48 02:31.560 --> 02:32.430 "Nice! 49 02:33.380 --> 02:39.920 You've just used a pseudo class on a 50 02:41.490 --> 02:41.870 div 51 02:44.550 --> 02:45.270 element". 52 02:46.120 --> 02:52.390 If we refresh the browser, we can see that we've got all the text displayed, but we don't want to 53 02:52.390 --> 02:56.300 show this paragraph until the user hovers over the div with their mouse. 54 02:56.320 --> 02:57.890 So how do we do this, my dear students? 55 02:57.910 --> 03:00.520 Well, firstly, let's style this paragraph element. 56 03:00.520 --> 03:02.350 I want a background. 57 03:04.120 --> 03:05.440 Of ... let's just do yellow. 58 03:06.620 --> 03:08.690 And let's give it a padding of 20 pixels. 59 03:08.960 --> 03:11.450 And the final step is, I want to hide this. 60 03:11.450 --> 03:14.720 So let's set its default display to none. 61 03:14.900 --> 03:17.000 So now it's gone. 62 03:17.120 --> 03:21.920 I want to target a CSS pseudo class. And we don't have to use pseudo classes with forms. 63 03:22.160 --> 03:26.790 That's why the skills you're learning in this course are going to really help you in your dev career. 64 03:26.830 --> 03:27.950 Super exciting. 65 03:28.190 --> 03:35.270 But anyway, we want to use the CSS pseudo class and what's cool is that we can use these with other 66 03:35.270 --> 03:42.740 CSS combinators. For example, we might want to use the tilde combinator in CSS to target a sibling. 67 03:43.280 --> 03:44.190 Let me show you what I mean. 68 03:44.240 --> 03:45.410 So let's grab the div. 69 03:45.500 --> 03:53.570 We know that we want to target its hover state and specifically we want to target the sibling paragraph. 70 03:53.570 --> 04:01.340 And the sibling in a CSS combinator is denoted by tilde (~) , this little funny curly thing. 71 04:02.000 --> 04:04.040 And we want to target the paragraph. 72 04:04.220 --> 04:07.910 This is how easy it is to target a state, 73 04:07.940 --> 04:09.810 here, a hover state. 74 04:09.830 --> 04:15.340 And all we want to do, when that happens, because remember now we're targeting that paragraph, 75 04:15.350 --> 04:20.780 we want to set its display property, not to none, to block, which is its default. 76 04:20.810 --> 04:25.850 So let's take the mouse and hover over the div and there we go. 77 04:25.880 --> 04:27.840 How awesome is this? 78 04:27.860 --> 04:28.970 (sound effect: mission completed) 79 04:29.810 --> 04:37.270 Just a really, really quick and fun example to show you how easy it is to work with pseudo classes. 80 04:37.280 --> 04:39.950 But I know, I know this course is all about forms. 81 04:39.950 --> 04:46.370 So in the next lecture, let's continue talking about pseudo classes but with a flavor of forms. 82 04:46.400 --> 04:47.990 See you in the next lecture.