Preview
Video Player
00:00
00:00
The Selectors Solution
3:30In this video, we'll go over each of the CSS selectors for this practice session.
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