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 name564681351614
name564681351614
3,497 Points

Hash ID?

I'm having a tough time with this challenge. I'm sure it must be something with my ID definition but I'm not sure what to do about it. HELP! :)

Question: Create a new rule using the selector that targets an element only if its ID matches the hash in a URL. Set the background color to tomato.

Answer:

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

4 Answers

dylanpardee
dylanpardee
Courses Plus Student 8,740 Points

The CSS selector :target allows you to style the target assigned in the URL
If you had a simple website with a contact page using this URL. 

http://www.example.com/contact.html

And you would like to link to a 

<div id="gmap">

containing a Google map at the bottom of the page from another page. The link would look like this. 

http://www.example.com/contact.html#gmap

Now if you would like to create a background color for that div and only apply it when a user travels to the above URL. Which would make this div with the id of "gmap" the TARGET. You would use this CSS to target the 

<div id="gmap">

only when it's the target.

div#gmap:target {
    background-color:  #B1E5FF;
}

When a user travels to the contact page and scrolls down to the map at the bottom they would not see the style applied, unless they clicked the link specifying the target.

The below CSS will apply the style to any element with an id passed in the URL(making it a target).

:target {
    background-color:  #B1E5FF;
}

Let me know if you have any questions. Hope this helps :-)

name564681351614
name564681351614
3,497 Points
name564681351614
name564681351614
3,497 Points

Also - why aren't my backticks displaying my code correctly in these posts? I put 3 before and after. ```

??

Emma Willmann
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Emma Willmann
Treehouse Project Reviewer
Emma Willmann
.a{fill-rule:evenodd;}techdegree seal-36
Emma Willmann
Treehouse Project Reviewer

The backticks need to be on the line before and the line after. So it would be:

backtick backtick backtick
code
backtick backtick backtick
Tommy Gebru
Tommy Gebru
30,164 Points
Tommy Gebru
Tommy Gebru
30,164 Points

Hey Eric,

Also when you get the chance take a look at this great discussion, How-to-Guide : Markdown within Posts that goes into detail how to format your posts in the forum.

Happy Coding!

Ken Alger
STAFF
Ken Alger
Treehouse Teacher
Ken Alger
Ken Alger
Treehouse Teacher

Eric;

You need to use the div:target selector to select those items.

Here's a couple of additional resources for you:

CSS-Tricks

:target - Mozilla Developer Network

Happy coding,

Ken

Emma Willmann
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Emma Willmann
Treehouse Project Reviewer
Emma Willmann
.a{fill-rule:evenodd;}techdegree seal-36
Emma Willmann
Treehouse Project Reviewer

All you need to do for your code is remove the parenthesis and what is inside them. Your code should look like this: 

:target {
  background-color: tomato;
}