Using :target CSS

I've recently discovered a new CSS pseudo-property, so decided to try it out on this site. If you click on the comments link to any of the blog posts, the comments area will now be highlighted. (Edit: Since writing this article, I have changed both engine and design of this site, and I no longer have comments nor do I use this CSS feature anymore).

It's highlighting whichever area is in the target part of the url (the bit after the hash, eg. inexample.html#target the target is self-named).

The CSS I'm using is:

#respond:target { background-color: #ddd; padding: 8px; }

which sets the #respond item to have a grey background colour if it's the current target. But it can be used for other things. Maybe if you have a list of for example support questions, and you want to only show an item if it's been navigated to, you can possibly use the following:


<div id="question1"> <p>Question 1</p> <p class="answer">Answer to question 1</p> <div> <div id="question2"> <p>Question 2</p> <p class="answer">Answer to question 2</p> <div>


.answer { display: none; } :focus .answer { display: block; }

With some Javascript to show/hide the answers, of course.