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 go over each of the CSS selectors for this practice session.
Resources
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
Hey there, how'd it go?
0:00
Hopefully you were able to write most or
all the selectors for
0:01
this practice session.
0:04
Now let's walk through the solution.
0:05
First, to change the color of all the list
items nested inside an unordered list.
0:08
You should have created a descendent
selector that targets li tags nested
0:14
inside a ul tag, and I chose the color
lightcoral as the text color.
0:20
Next, to remove the text operation
from navigation links only, I
0:26
created a descendent selector that targets
anchor elements inside the nav tag.
0:32
Now you could have also included
the link pseudo class and
0:39
the selector to target the links.
0:42
Then right below it,
I created a similar descendant selector,
0:45
this time using the :hover psuedo-class
and set the color to skyblue.
0:51
To create hover and visited styles for
links inside the main element,
0:57
I wrote two selectors,
one that targets hovered links inside main
1:03
and one that targets links inside
main that have been visited.
1:12
And I chose to change the color to tomato
and remove the text decoration on hover.
1:16
And I change the text color
to skyblue once visited.
1:23
So next up, to change the background
color of the submit button when active.
1:28
You should have used an attribute
selector that targets an input element
1:35
with a type of submit followed
by the active pseudo-class,
1:39
and I chose firebrick as
the active background color.
1:43
Then to give the text field
a blue border upon focus,
1:48
I once again used an attribute selector.
1:52
This time it targets an input
element with a type of text and
1:56
to apply a border upon focus,
I used the pseudo-class and
2:00
gave it a 1 pixel solid border that
matches the color of the button.
2:04
All right, so let's keep going.
2:10
For the next two selectors, you first had
to apply classes and IDs to elements.
2:11
So I gave the span tag in the footer
a class attribute and the value copyright.
2:17
I then selected the class in the style
sheet using a class selector with a period
2:28
in front of the name, and
reduced the font size value to 12 pixels.
2:33
Back in the HTML, I gave the image
tag in the header the ID site logo.
2:39
Then to select it, I wrote an ID
selector which uses the hash symbol in
2:47
front of the name,
then set the width to 190 pixels.
2:52
Finally, the page uses only h1, h2 and
2:57
h3 tags, so I selected all three
headings in one rule by grouping them
3:01
with a comma separated
list of element selectors.
3:07
And I applied the Bree Serif,
serif font stack as the font-family value.
3:10
All right, so
now your page should look similar to this.
3:15
And it's totally okay if you
didn't get all the selectors.
3:19
Just keep practicing them until you
start feeling comfortable using them.
3:21
You're also going to learn so much more
about CSS selectors in an upcoming course.
3:25
I'll see you soon.
3:29
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