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

Derek Zinger
Derek Zinger
3,337 Points
Posted by 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
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.

Carsten Pleiser
Carsten Pleiser
8,386 Points
Carsten Pleiser
Carsten Pleiser
8,386 Points

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