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
Matt Ensor
3,278 Pointsconfused about :target?
don't I need to specify? or is that done with the # in html ... how does it work?
3 Answers
Ken Alger
Treehouse TeacherMatt;
This question has come up a couple of times recently. So let's go through some HTML code, okay?
For the sake of this discussion lets say that we have a single page site that requires a lot of scrolling to get from top to bottom. Our navigation menu at the top of the page is page specific (could be anywhere, for this example it is at the top) and lists out all of our headings or subjects in which we have deemed it necessary to include an id="" in our HTML markup. Our <a> tags for those page specific links would look similar to:
<a ref="internal" href="#someLinkOnPage">
Then in our CSS with the :target pseudo selector we can style that specific page element when the associated navigation link has been clicked on. Let's take a look at some basic code, eh?
CSS:
body {
background-color: lightblue;
}
:target {
background-color: tomato;
}
HTML:
<!-- Sample code to highlight CSS :target pseudo selector
somesite.com/index.html
-->
<!DOCTYPE html>
<html>
<body>
<ul>
<li>
<a rel="internal" href="#Summary">Summary</a>
</li>
<li>
<a rel="internal" href="#Conclusion">Conclusion</a>
</li>
</ul>
<div class="start">
<h1 id="Summary">Summary</h1>
<p>A bunch of long winded stuff</p>
</div>
<div class="finish">
<h2 id="Conclusion">Conclusion</h2>
<p>More long winded text...</p>
</div>
</body>
</html>
So, when the page initially loads the entire background is lightblue, correct? Even the background of our heading elements with id tags. However, once we click on the nav links, the associated heading elements change color. This can be useful in a lot of ways, but is really useful if the page has a lot of headings and text and allows you to see exactly where the section you want to be reading is.
From a URL standpoint, when you click on the nav link it would append the # symbol to the end of the URL along with the attribute selected, so somesite.com/index.html#Summary.
If you want to read more, I would point you to the Mozilla Developer's Network site here on this selector.
Much more can be done too, but I hope that helps a bit.
Ken
Joshua Holland
2,865 PointsThe :target pseudo selector in CSS matches when the hash in the URL and the id of an element are the same.
Matt Ensor
3,278 PointsKen, Thankyou so much - That helps alot & now get it :)