Clearing off :target CSS psuedo class

Question

Lately I\'ve been working on Shower HTML5+CSS3 presentation template to make a upcoming presentation. Shower uses the CSS :target pseudo-class which makes it easy to identif

Answer 1

To clear the hash target with a link without using Javascript, you can just make another <a> tag with href="#".

Simple example: http://jsfiddle.net/Y5XB7/
Click on the top black square for the :target to be active, then click on the bottom black square to clear it.

<a href="#" ...> ... </a>

Answer 2

I previously tried the following two statements and it didn't work (at least on Firefox):

history.pushState({}, 'null', window.location.pathname);
window.location.href.substr(0, window.location.href.indexOf('#'));

The trick is to use this instead:

window.location.hash = '';

The problem only exists if we're trying to clear the :target selection through JavaScript. Anchor tags with non-existing or empty hashes works: http://jsfiddle.net/SMbsb/3/