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
stevencooper
5,755 PointsCreate 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
Jeff Busch
19,287 Points
Jeff Busch
19,287 PointsBelow 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;
}
stevencooper
5,755 PointsHow 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
52,045 PointsHi 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
stevencooper
5,755 Pointsreading 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
52,045 PointsWhen 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
Jeff Busch
19,287 PointsHi 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>
stevencooper
5,755 PointsYour 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?
Jeff Busch
19,287 PointsThis is what I passed the code challenge with. Did you try it?
stevencooper
5,755 PointsJeff, 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?
stevencooper
5,755 PointsI finally had my "ah-ha!" moment. thank you for your help.
Wayne Priestley
19,579 PointsHi 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.
stevencooper
5,755 PointsNot 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.