"JavaScript Loops, Arrays and Objects" was retired on December 18, 2020. You are now viewing the recommended replacement.
Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed CSS Selectors!
You have completed CSS Selectors!
Preview
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