:root and :target5:12 with Guil Hernandez
In this video, we'll cover the :root and :target pseudo-classes. :root selects the highest-level parent element in a document, and :target selects an element when it's the target of a link.
So one of the three final pseudo classes we'll cover here is the root pseudo class. 0:00 What root does for us, is it selects the element that is the root of the document, 0:05 or the highest level parent. 0:10 Now, in an HTML file, this will usually be the HTML element, 0:12 because as we can see, it is in fact the topmost element in the document. 0:16 So, let's go over to our CSS directory, and open up the style.css file. 0:21 And, in our style sheet, 0:27 we're going to create a root pseudo class by typing colon, followed by root. 0:29 [BLANK_AUDIO] 0:34 And let's give this rule, a background property, and 0:37 let's set the value to pound e3effb. 0:42 So, once we save our style sheet and 0:46 refresh the page, we see how the selector targets the HTML element as the root, and 0:48 it turned the background color of the page light blue. 0:53 Now if you're wondering why not just use the HTML selector instead? 0:57 Well, keep in mind that root has more specificity than the HTML type selector. 1:01 And the reason I'm bringing up the root pseudo-class here, is that CSS can be 1:07 used with other types of mark-up languages or formats, like SVG and XML. 1:11 So in those classes, the root pseudo-class may refer to different elements. 1:15 But no matter the language, 1:20 root will always target that top most element in the document. 1:22 So next, we have the target pseudo class. 1:26 And target selects an element when the element is the target of a link. 1:29 Now the way the browser selects the element is based on the hash in a URL. 1:33 And I'll show you what I mean. 1:37 So, by now, we know that ID's also have browser functionality. 1:38 So we can use them as landmarks or anchors in a page. 1:43 So, for instance, the different href values in our three links here, 1:46 match the IDs of the three columns below. 1:51 So for instance here we have column A, column B, and 1:54 column C as the href values for our three links. 1:57 Then right below, we have divs with the ID column A, 2:00 column B, and below that, column C. 2:05 So if we go back to the browser and click on any of these links, 2:08 notice how the href value gets appended to the URL. 2:13 So after the URL, we see the hash mark with the column A identifier. 2:18 And this is what the browser uses to target the element with 2:23 the corresponding ID. 2:27 So, back in our style sheet, 2:28 let's create a new selector using the target pseudo class. 2:30 So we're gonna type colon, followed by target. 2:33 Let's style this so that once an element is the target of a link, 2:38 we're going to invert the colors in our column. 2:42 So to do that, let's add a background property, and 2:46 we're gonna set a background color of #384047, and let's make the color white. 2:50 All right. 2:57 So let's save our style sheet, and refresh our preview. 2:59 Once we click on a column link, if a column's ID matches a link's href value, 3:03 the column takes on those styles defined in the target selector rule. 3:08 So in this case, column A is the target, as we can see here in the URL, but 3:12 once we click the column B or column C links, those become the target elements. 3:17 Cool. [BLANK_AUDIO] 3:23 And if we need to style a specific target, 3:26 we'll need to specify the ID in front of the pseudo-class. 3:28 So, for example, let's make column C here, take on different styles on target. 3:32 So back on our style sheet right below the target rule, 3:37 let's first target that col C ID, followed by the target psuedoclass, 3:43 and let's set it to a background color of #eff1f2, and 3:50 right below that, let's set the color value back to 3:56 the initial value, and let's give it a box-shadow. 4:01 Let's have some fun here. 4:07 So let's add a box-shadow property, and let's make the offsets 0. 4:08 So we're gonna add two 0s, and then we're going to make the blur 6 pixels, 4:12 and let's set the color value to an RGBA value, and 4:18 it's going to be 0,0,0, and let's set the alpha to 0.2. 4:22 Okay. So once we save our style sheet, 4:26 let's refresh the page, and once we click the column C link, we're able to see 4:29 those more specific styles applied to the column, once the browser targets it. 4:34 [BLANK_AUDIO] 4:39 So with the target pseudo class, 4:42 we can do a number of things to change the state of an element on target. 4:44 So we could, for 4:48 example, change its position, maybe display a different background image. 4:49 We can also hide or 4:53 show parts of an element on target, even trigger an animation sequence. 4:53 So, a useful selector we can use to indicate to the user that something on 4:57 the page has changed. 5:02 And take a look at the link in the teacher's notes, because I've added a cool 5:04 little animation sequence, that was created with the target pseudo class. 5:08
You need to sign up for Treehouse in order to download course files.Sign up