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

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

There is the same question asked, but the answer is not given. Any help would be appreciated.

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.

the setting the background-color: tomato; was easy, I just don't get the part about targeting elements. I've looked thru my notes and can't find a thing that resembles this question

here's what I have so far: css

/* Write your CSS code below */

:root {
  background-color: lightblue;
}

and the accompanying html:

<!DOCTYPE html>
<html>
<head>
    <title>More Pseudo-classes</title>
    <link rel="stylesheet" type="text/css" href="page.css">
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
    <body>
        <ul>
            <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>
        <div id="s2">
            <h2>Section 2</h2>
            Integer laoreet urna ut est cursus nec tristique elit vestibulum. In hac 
            habitasse platea dictumst. Quisque pharetra odio nec urna lobortis sed 
            ultrices dolor posuere. Sed nec nisl id augue congue euismod. 
        </div>
    </body>
</html>

6 Answers

Below is the code that passes. What some people don't/didn't realize, myself included, is that after implementing the :target selector, you then have to click on the link to see the effect.

/* Write your CSS code below */
:root {
  background-color: lightblue;
}

:target {
  background-color: tomato;
}

How is the :target directed to select elements with a #?

At the very top of the question, i have posted the html code, and the css that the 1st challenge had me do.

Kang-Kyu Lee
Kang-Kyu Lee
52,045 Points

Hi Steven, this is about target pseudo-class. In the challenge question, "element id" refers

<div id="s1">

"the hash in a URL" means

<a href="#s1">

:) So you may find out the rest... http://www.w3.org/TR/css3-selectors/#target-pseudo

reading the information at the url you posted just made me more confused.

Direction:

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.

What would the selector targeting an element only if the element's ID matches the # in a url look like? that is the basic question and I'm not getting it. Setting the background color isn't the problem, that at least i know how to do.

Kang-Kyu Lee
Kang-Kyu Lee
52,045 Points

When somebody opens the browser and type http://example.com/html/top.html#section_2 and then it goes to top.html page, and look for an element with id="section_2", which can be styled by :target pseudo-class CSS.

And when you click anchor <a href="#s1">Go to div</a> in index.html file, it redirects you to http://example.com/index.html#s1

So :target acts as #s1 in CSS file because it has #s1 at the end of url in this case... Hope it makes sense

https://developer.mozilla.org/en-US/docs/Web/CSS/:target

Hi stevencooper,

This is a tricky one. If I'm not mistaken, when you link to a spot in the same page I think it's called target, or something like that. So when you're using pseudo-classes in this situation you use the word target. I'm probably not explaining this well so I'll post some code.

Jeff

:target {
  background-color: tomato;
}
<a href="#s1">Go to div</a>


<div id="s1">I'm the target</div>

Your css changes the background color of everything. I have to be more specific by targeting only the ```<a href="#"> elements. how do you tell :target to target only "#" elements?

This is what I passed the code challenge with. Did you try it?

Jeff, your last response had no code. I am still completely lost. somehow in the css file i have to designate a #element but your code above css changes the background color of everything. I have to be more specific by targeting only the # elements. how do you tell :target to target only "#" elements?

I finally had my "ah-ha!" moment. thank you for your help.

Wayne Priestley
Wayne Priestley
19,579 Points

Hi Steven,

You looking for a link in your HTML that has id=something

Then in your CSS you have to create a rule for that id setting the background colour.

Creating a rule to target a class for example would be

.something { font-size: 12px;}

Hope this helps.

Not really. I've reviewed the Additional Pseudo-class videos and cannot find this rule that the challenge calls for. I don't understand your .something {font-size:12px;}... it doesn't seem to address my question.

I don't mean to seem dense to you, but I don't understand the question, and cannot find the rule that is supposed to be used in this instance.

this list item contains the anchor & href for the #: <li><a href="#s1">Target Section 1</a></li>

but that's not what it's entirely looking for ... it's looking for the rule, and for the life of me I cannot find it in the notes, or video transcripts - at least not that I'd recognize it as.