The Selectors Solution3:30 with Guil Hernandez
In 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
You need to sign up for Treehouse in order to download course files.Sign up