Home/ Questions/Q 8675525
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-12T19:58:16+00:00

Lately I’ve been working on Shower HTML5+CSS3 presentation template to make a upcoming presentation.

  • 0

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 identify the current slide in the overview of the slides.

I understand how :target works through the hash in the URL, but however I cannot get it to clear the :target CSS from all elements at all.

So my question is: given that after an element has been :targeted, how can we clear all the :target and revert it to the norm using JavaScript? The use of History API doesn’t seem to work.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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/

    • 0