Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS CSS Foundations Advanced Selectors Additional Pseudo-Classes

Posted by Jade Sword
Jade Sword
2,659 Points

I need help

I do not understand how to do this

index.html 
<!DOCTYPE html>
<html>
<head>
    <title>More Pseudo-classes</title>
    <link rel="stylesheet" type="text/css" href="page.css">
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
    <body>
        <ul>
            <li><a href="#s1">Section 1</a></li>
            <li><a href="#s2">Section 2</a></li>
        </ul>       
        <div id="s1">
            <h2>Section 1</h2>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex.
        </div>
        <div id="s2">
            <h2>Section 2</h2>
            Integer laoreet urna ut est cursus nec tristique elit vestibulum. In hac 
            habitasse platea dictumst. Quisque pharetra odio nec urna lobortis sed 
            ultrices dolor posuere. Sed nec nisl id augue congue euismod. 
        </div>
    </body>
</html>
style.css 
/* Write your CSS code below */
:root {
  background-color: lightblue;
}

[id *= "#"] {
  background-color: tomato;
}

4 Answers

Karen Freeman-Smith
Karen Freeman-Smith
29,248 Points
Karen Freeman-Smith
Karen Freeman-Smith
29,248 Points

I think by "root" element they mean the body, or maybe html as the element to target in your css.

Jade Sword
Jade Sword
2,659 Points
Jade Sword
Jade Sword
2,659 Points

no the second part

Romuald Le Bris
Romuald Le Bris
3,975 Points
Romuald Le Bris
Romuald Le Bris
3,975 Points

Hello Jade,

I think you are a bit confused on this challenge. They do give you some loooooong questions for some very small code. Here they ask you to select the root element of the page (You could of check what is a root element btw ;] ) For html, the root element is ... html ! lol

And the second question they ask is a bit tricky... However, they just ask you to create a new selector that "targets" an element that has a # "hash" in its url.

So the code would be 

html {
  background-color: lightblue;
}

div:target { 
background-color: tomato; 
}

Don't forget to +1 the answer if it has helped you ! It could help other with the same issue in the future :]

Steven Parker
Steven Parker
229,744 Points
Steven Parker
Steven Parker
229,744 Points

The selector that the challenge is expecting is a pseudo-class that was introduced in the video just prior to the challenge.

You might want to review this video.

Romuald's suggestions may pass the challenge but they're not exactly what the challenge is asking. You were right about task 1 by using ":root" — while "html" does target the same element, ":root" does it with higher specificity. For the second task, using "div:target" will only select a "div" element that meets the "target" criteria, not any element that does.