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

Mark Moran
Mark Moran
4,207 Points
Posted by Mark Moran
Mark Moran
4,207 Points

Unable to solve task 2 of 2 in Stage 3: Advanced Selectors. =(

I tried several different solutions and feel like this one is correct:

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

But it doesn't seem to be working ... Any help?

1 Answer

Ron McCranie
Ron McCranie
7,837 Points
Ron McCranie
Ron McCranie
7,837 Points

You're over thinking it a little. The :target pseudo element will select any element on the page who's id matches the hash value in the url.

:target {
  background: tomato; 
}
Mark Moran
Mark Moran
4,207 Points
Mark Moran
Mark Moran
4,207 Points

Thanks Ron. I guess the problem is that I don't understand what a "hash value" is. Can you shed some light on that? I thought it was referring to a value that is the hash/pound symbol?

Hugo Paz
Hugo Paz
15,622 Points
Hugo Paz
Hugo Paz
15,622 Points

Hi Mark,

The hash value refers to the value inside an Anchor tag like this:

<li><a href="#s1">Section 1</a></li>

In this case the value is s1 which is the id of the following div:

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

Once you click on the link the div background will turn to tomato colour, using Ron code above.

Mark Moran
Mark Moran
4,207 Points
Mark Moran
Mark Moran
4,207 Points

So, :target will select anything on the page within the quote marks in an <a> tag? And on a page with multiple <a> tags it selects all of them? Just want to make sure I understand. Thanks so much for your help. :-)

Hugo Paz
Hugo Paz
15,622 Points
Hugo Paz
Hugo Paz
15,622 Points

The :target pseudo selector matches when the hash in the URL and the id of an element are the same.

If you have this css:

:target{
background:lightblue;
}

And this HTML

<ul>
       <li><a href="#s1">Section 1</a></li>
       <li><a href="#s2">Section 2</a></li>
       <li><a href="#s3">Section 3</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>
            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="s3">
            <h2>Section 3</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>

If you clink the first link, it will take you to the section1 on the page and will turn that div background light blue.

If you click the second link, it will take you to the section2, turn that div background light blue while the s1 div background color will turn back to the default one.

Mark Moran
Mark Moran
4,207 Points
Mark Moran
Mark Moran
4,207 Points

Ah! I get it now. Thanks so much for your help. Yay for lightbulbs over the head. :-)