What's, why's and how's of :target pseudo-selector.
One of the strongest points of CSS3 is introduction of a bunch of new pseudo-selectors that most of you, probably, are familiar with by now. :nth-child(n), :first-of-type, :last-child and alike to name some. They significantly improve the productivity when styling your documents. They also let you avoid using CSS classes like .first .last and such in your HTML markup. But there are some overlooked pseudo-selectors introduced in CSS3 that are not less useful though not as wide-spread. One of them is :target.
How does it work.
The selector is supported in current versions of all major browsers including Internet Explorer 9. :target selects an element with the same ID as the URL hash. Consider the following CSS snippet:
#content:target { background: Orange; }
When applied to http://mysite.com page, nothing happens to #content. But, http://mysite.com#content will have that element highlighted with the orange background.
Where to use it.
I'm sure you have seen quite a few web pages with a navigation bar, linking to some sections on the same page instead of being linked to some external pages. That's the most obvious use case for :target. Check this demo of the pure css carousels in a contemporary browser. When you click a link in the navigation bar to switch a demo, it's the :target that takes care of presenting the right demo to you. Becasue of the direct relation to the URL hash, this is the most obvious use case, but not the only one. You can make any type of navigation with this pseudo-selector, like accordeon panels, sliders or carousels. You might even use it in some not very navigation related cases.
What's wrong with it then?
Compatibility.
Of course everything can not be as smooth as it seems. First of all, the compatibility. Even though cross-browser support for :target pseudo-selector is quite descent, it's not ideal. And we know who to blame — if you have to provide the same functionality for the versions of IE older than 9, you will have to use a javascript fallback. In most cases with new CSS3 features it would not be a problem. But with this particular one, javascript will be so tiny that you might consider simply using javascript for all the browsers instead of CSS (for capable browsers) + javascript (for a fallback and support checkup). For example, the simplest jQuery snippet providing the same functionality as :target and even more would look like:
$('nav a').click(function () { var target = $(this).attr('href'); $(target).addClass('target'); });
Singular application.
There is one more issue to keep in mind when considering use of :target. If you have more than one :target pseudo-selector per web page they might override each other even if not applied to the same elements. Consider the following snippet
<style> section:target { background: Orange; } </style> <body> <ul> <li><a href="#panel1">Link 1</a></li> <li><a href="#panel2">Link 2</a></li> </ul> <section id="panel1">Panel 1</section> <section id="panel2">Panel 2</section> </body>
So far so good — you click a link and relevant panel gets orange background. Now consider extending #panel1:
<style> section:target { background: Orange; } div:target { background: Olive; } </style> <body> <ul> <li><a href="#panel1">Link 1</a></li> <li><a href="#panel2">Link 2</a></li> </ul> <section id="panel1">Panel 1</section> <ul> <li><a href="#panel1-subitem1">Link 1-1</a></li> <li><a href="#panel1-subitem2">Link 1-2</a></li> </ul> <div id="panel1-subitem1">Panel 1-1</div> <div id="panel1-subitem2">Panel 1-2</div> </section> <section id="panel2">Panel 2</section> </body>
Again, if we click Link 1 we get orange background for the Panel 1. Now, when I click Link 1-1 for example, I want to get olive background for the Panel 1-1 while still keep orange background for the Panel 1. This will not work out. Because once Link 1-1 is clicked, URL hash is changed from #panel1 to #panel1-subitem1 that automatically means section:target { background: Orange; } is not applied anymore. Hence, even though Panel 1-1 gets the olive background, Panel 1 will not have orange background anymore.
And again, with javascript solution you are free from this issue.
To use or not to use?
As with anything else, it depends. For prototyping, experimenting and similar quick & dirty solutions I would definitely say "yes". For production code you should consider yourself keeping in mind the aforementioned notes. But most of the times you will find that javascript solution just works and does what you need faster and in a predictable manner.
