Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS CSS Foundations Advanced Selectors Additional Pseudo-Classes

Derek Zinger
Derek Zinger
3,337 Points

Create a new rule using the selector that targets an element only if its ID matches the hash in a URL

Honestly, I'm not quite sure what I'm being asked to do here. I've put the following into the CSS:

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

But when I check my work, I get the message to check my selector and make sure the background-color is set to tomato. I'm not surprised, as the code I've added was covered in a previous section. Can anyone point me in the right direction? Thanks!

2 Answers

Derek Zinger
Derek Zinger
3,337 Points

Hi Carsten

I've just seen your reply. Otherwise, I would have replied sooner! Thanks for taking the time to help me out; I really appreciate it.

I don't think I've gotten to the :target selector just yet, in which case, I'm not thinking that would be the answer they're after. I did let it go for a day, and when I came back, I saw the question in a new light. The trouble was that I didn't understand what I was being asked to do, and so logically I couldn't come up with the code. I don't know if the question could be worded any better - it's more a case of asking something that seemed kind of out of the blue compared to questions that had been asked previously in the course.

Anyway, I ended up figuring it out on my own. For the record, the proper code is:

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

Referring to this HTML:

            <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>

I can already think of a great use for the :target pseudo-class! Looking forward to making its acquaintance. Or maybe I have learned it, and I need to go and refresh my memory… :) Thanks, again, Carsten.

Hi Derek

Have you thought about the CSS pseudo class ":target"?

URLs with an # followed by an anchor name, link to a certain element within a document. The element being linked to is the target element. The :target selector can be used to style the current active target element.

Example:

For example, if the URL was http://www.teamtreehouse.com/index.html#section2, the :target selector would match the element that had an id attribute of "section2":

:target { background-color: etc.... }

Hope this gives you the right hint. Good luck with the challenge and let me know if it worked.

Carsten