Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
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.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
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 col-a,
col-b, and
1:54
col-c as the href values for our three
links.
1:57
Then right below, we have divs with the ID
col-a,
2:00
col-b, and below that, col-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 col-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 col-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 psuedo class,
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 upYou need to sign up for Treehouse in order to set up Workspace
Sign up