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