1 00:00:00,640 --> 00:00:05,730 So one of the three final pseudo classes we'll cover here is the root pseudo class. 2 00:00:05,730 --> 00:00:10,530 What root does for us, is it selects the element that is the root of the document, 3 00:00:10,530 --> 00:00:12,330 or the highest level parent. 4 00:00:12,330 --> 00:00:16,399 Now, in an HTML file, this will usually be the HTML element, 5 00:00:16,399 --> 00:00:21,194 because as we can see, it is in fact the topmost element in the document. 6 00:00:21,194 --> 00:00:27,760 So, let's go over to our CSS directory, and open up the style.css file. 7 00:00:27,760 --> 00:00:29,434 And, in our style sheet, 8 00:00:29,434 --> 00:00:34,476 we're going to create a root pseudo class by typing colon, followed by root. 9 00:00:34,476 --> 00:00:37,396 [BLANK_AUDIO] 10 00:00:37,396 --> 00:00:42,801 And let's give this rule, a background property, and 11 00:00:42,801 --> 00:00:46,596 let's set the value to pound e3effb. 12 00:00:46,596 --> 00:00:48,764 So, once we save our style sheet and 13 00:00:48,764 --> 00:00:53,826 refresh the page, we see how the selector targets the HTML element as the root, and 14 00:00:53,826 --> 00:00:57,177 it turned the background color of the page light blue. 15 00:00:57,177 --> 00:01:01,710 Now if you're wondering why not just use the HTML selector instead? 16 00:01:01,710 --> 00:01:07,130 Well, keep in mind that root has more specificity than the HTML type selector. 17 00:01:07,130 --> 00:01:11,460 And the reason I'm bringing up the root pseudo-class here, is that CSS can be 18 00:01:11,460 --> 00:01:15,970 used with other types of mark-up languages or formats, like SVG and XML. 19 00:01:15,970 --> 00:01:20,260 So in those classes, the root pseudo-class may refer to different elements. 20 00:01:20,260 --> 00:01:22,052 But no matter the language, 21 00:01:22,052 --> 00:01:26,021 root will always target that top most element in the document. 22 00:01:26,021 --> 00:01:29,150 So next, we have the target pseudo class. 23 00:01:29,150 --> 00:01:33,510 And target selects an element when the element is the target of a link. 24 00:01:33,510 --> 00:01:37,210 Now the way the browser selects the element is based on the hash in a URL. 25 00:01:37,210 --> 00:01:38,751 And I'll show you what I mean. 26 00:01:38,751 --> 00:01:43,551 So, by now, we know that ID's also have browser functionality. 27 00:01:43,551 --> 00:01:46,812 So we can use them as landmarks or anchors in a page. 28 00:01:46,812 --> 00:01:51,554 So, for instance, the different href values in our three links here, 29 00:01:51,554 --> 00:01:54,331 match the IDs of the three columns below. 30 00:01:54,331 --> 00:01:57,678 So for instance here we have col-a, col-b, and 31 00:01:57,678 --> 00:02:00,731 col-c as the href values for our three links. 32 00:02:00,731 --> 00:02:05,331 Then right below, we have divs with the ID col-a, 33 00:02:05,331 --> 00:02:08,691 col-b, and below that, col-c. 34 00:02:08,691 --> 00:02:13,660 So if we go back to the browser and click on any of these links, 35 00:02:13,660 --> 00:02:18,160 notice how the href value gets appended to the URL. 36 00:02:18,160 --> 00:02:23,652 So after the URL, we see the hash mark with the col-a identifier. 37 00:02:23,652 --> 00:02:27,068 And this is what the browser uses to target the element with 38 00:02:27,068 --> 00:02:28,471 the corresponding ID. 39 00:02:28,471 --> 00:02:30,284 So, back in our style sheet, 40 00:02:30,284 --> 00:02:33,990 let's create a new selector using the target pseudo class. 41 00:02:33,990 --> 00:02:36,870 So we're gonna type colon, followed by target. 42 00:02:38,860 --> 00:02:42,964 Let's style this so that once an element is the target of a link, 43 00:02:42,964 --> 00:02:46,091 we're going to invert the colors in our column. 44 00:02:46,091 --> 00:02:50,350 So to do that, let's add a background property, and 45 00:02:50,350 --> 00:02:57,572 we're gonna set a background color of #384047, and let's make the color white. 46 00:02:57,572 --> 00:02:59,302 All right. 47 00:02:59,302 --> 00:03:03,762 So let's save our style sheet, and refresh our preview. 48 00:03:03,762 --> 00:03:08,257 Once we click on a column link, if a column's ID matches a link's href value, 49 00:03:08,257 --> 00:03:12,570 the column takes on those styles defined in the target selector rule. 50 00:03:12,570 --> 00:03:17,530 So in this case, Column A is the target, as we can see here in the URL, but 51 00:03:17,530 --> 00:03:23,240 once we click the Column B or Column C links, those become the target elements. 52 00:03:23,240 --> 00:03:26,536 Cool. [BLANK_AUDIO] 53 00:03:26,536 --> 00:03:28,884 And if we need to style a specific target, 54 00:03:28,884 --> 00:03:32,316 we'll need to specify the ID in front of the pseudo-class. 55 00:03:32,316 --> 00:03:37,750 So, for example, let's make col-c here, take on different styles on target. 56 00:03:37,750 --> 00:03:43,258 So back on our style sheet right below the target rule, 57 00:03:43,258 --> 00:03:50,563 let's first target that col-c ID, followed by the target psuedo class, 58 00:03:50,563 --> 00:03:56,429 and let's set it to a background color of #eff1f2, and 59 00:03:56,429 --> 00:04:01,698 right below that, let's set the color value back to 60 00:04:01,698 --> 00:04:07,241 the initial value, and let's give it a box-shadow. 61 00:04:07,241 --> 00:04:08,060 Let's have some fun here. 62 00:04:08,060 --> 00:04:12,921 So let's add a box-shadow property, and let's make the offsets 0. 63 00:04:12,921 --> 00:04:18,475 So we're gonna add two 0s, and then we're going to make the blur 6 pixels, 64 00:04:18,475 --> 00:04:22,148 and let's set the color value to an RGBA value, and 65 00:04:22,148 --> 00:04:26,980 it's going to be 0,0,0, and let's set the alpha to 0.2. 66 00:04:26,980 --> 00:04:29,409 Okay. So once we save our style sheet, 67 00:04:29,409 --> 00:04:34,545 let's refresh the page, and once we click the Column C link, we're able to see 68 00:04:34,545 --> 00:04:39,776 those more specific styles applied to the column, once the browser targets it. 69 00:04:39,776 --> 00:04:42,256 [BLANK_AUDIO] 70 00:04:42,256 --> 00:04:44,104 So with the target pseudo class, 71 00:04:44,104 --> 00:04:48,390 we can do a number of things to change the state of an element on target. 72 00:04:48,390 --> 00:04:49,010 So we could, for 73 00:04:49,010 --> 00:04:53,020 example, change its position, maybe display a different background image. 74 00:04:53,020 --> 00:04:53,953 We can also hide or 75 00:04:53,953 --> 00:04:57,831 show parts of an element on target, even trigger an animation sequence. 76 00:04:57,831 --> 00:05:02,873 So, a useful selector we can use to indicate to the user that something on 77 00:05:02,873 --> 00:05:04,451 the page has changed. 78 00:05:04,451 --> 00:05:08,241 And take a look at the link in the teacher's notes, because I've added a cool 79 00:05:08,241 --> 00:05:12,050 little animation sequence, that was created with the target pseudo class.