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

Javi Pérez
Javi Pérez
7,642 Points
Posted by Javi Pérez
Javi Pérez
7,642 Points

Problem with a challenge

On Advance Selectors I've got a problem doing a challenge. It says:

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.

But I don't uderstand when it says hash in URL...

I try to do:

:target (id="#") { background: tom }

But it doesn't work.

Help me please

5 Answers

Wayne Priestley
Wayne Priestley
19,579 Points
Wayne Priestley
Wayne Priestley
19,579 Points

Don't know for sure but my guess is that it's asking you to create a rule for a link you have in your html, maybe a nav item or image, that also has a id in it too.

Glad you got it sorted :)

Phouthalang Pygnasak
Phouthalang Pygnasak
4,795 Points
Phouthalang Pygnasak
Phouthalang Pygnasak
4,795 Points

@ Javi

I was stuck with this for awhile also, as I did not understand what :target meant. After reviewing the video transcript and rewatching the video, I concluded that :target is "specifically" used to target ANY ID with a "#" sign. In the video, this is referred to as a fragment identifier. Its a way for the browser to target a specific element within the same "HTML" document.

For example: 

        <li><a href="#s1">Target Section 1</a></li>
        <li><a href="#s2">Target Section 2</a></li>
        <li><a href="#s3">Target Section 3</a></li>
    </ul>

the <a href=#s1"> Target Section 1 </a><li> must have a matching element with an ID of "s1" without the hash on the page to reference to. Where if it didn't have the matching ID, the <a href=#s1"> Target Section 1 </a><li> will have no marker to navigate to.

NOW if <li><a href="s1">Target Section 1</a></li> did not have the "#", the :target pseudo-class will not be applied to that link nor would it navigate or reference the element with the ID of "s1".

So, basically the :target applies to ANY value with a "#".

Hope this clarifies how it works!

Javi Pérez
Javi Pérez
7,642 Points
Javi Pérez
Javi Pérez
7,642 Points

I've just resolve it. I put :target {background-color: tomato;} and it works but I still don't undesrtand it.

Wayne Priestley
Wayne Priestley
19,579 Points
Wayne Priestley
Wayne Priestley
19,579 Points

Hi Javi,

The # is the way you identify an id using css, for example:

If your html has

<div id="blue-box">
<p>This is text in a blue box<\p>
<\div>

Then in your css you would use the # to tell your css it's an id your identifying.

#blue-box {
background: blue;
}

Just like you use a . to identify a class.

Hope this helps.

Javi Pérez
Javi Pérez
7,642 Points
Javi Pérez
Javi Pérez
7,642 Points

Yes I understand how works an ID but I don't understand what is the challenge asking me... Because it says only if the id hash an URL and i don't understand that because I resolved it with :target and I didn't put any ID or URL...

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

Hi Javi,

Did you ever figure out the "why" of this one? I'm currently stuck on it and I posted the below 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.

:target([id="#"]) {
  background-color: tomato;
}
Wayne Priestley
Wayne Priestley
19,579 Points
Wayne Priestley
Wayne Priestley
19,579 Points

Hi Eric,

It probably a better idea to ask your question in a new post as this post has been answered, it's also an old post so not many people will look at it.