Using CSS3 :target selectors

This is a quick post to present a JavaScript that provides CSS3 :target pseudo selector like functionality for browsers that do not provide native :target support.

function() {
    var cssClass = 'target';

    // Initialise targeted fragments if any.
    var target = document.getElementById(window.location.hash.slice(1));
    if (target) {
        target.className += ' ' + cssClass;

    // Click event handler function generator. This is passed a "frag" argument
    //   that is a reference to the target element.
    var reCSS = new RegExp("\\b" + cssClass + "\\b");
    function newTargetClickHandler(frag) {
        return function() {
            if (target) {
                target.className = target.className.replace(reCSS, '');
            target = frag;
            target.className += ' ' + cssClass;

    // Run thru <a> elements and add an onclick handler to those that reference
    //   document fragments within the current page.
    var reURI = new RegExp('^' + window.location.href.match(/^[^#]+/)[0] + '#([^#]+)$');
    var elems = document.getElementsByTagName('a');
    for (var i=0; i<elems.length; i++) {
        if (elems[i].href && elems[i].href.match(reURI)) {
            elems[i].onclick = newTargetClickHandler(document.getElementById(RegExp.$1));

When the user clicks on a link that points to a fragment within the current page, this code will add a CSS class of “target” to the targeted element, and will remove the same “target” class from any previously targeted element.

Originally I was using the CSS3 :target pseudo selector and the .target class selector together in the same rule set, but I found that Opera (9.26) would not apply the rules presumably because it considered it invalid.

h2:target, {
    color: red;

I’m not sure if this is correct behavior, but regardless of cause, I found I had to use a duplicate set of CSS rules; one for both modes of selection.

h2:target {
    color: red;
} {
    color: red;

And basically… that’s it! You can see it in action on this test page, and I hope to add a follow up post soon…. time allowing.

You download the the JavaScript here:
Full-fat script with white-space and comments [1621 bytes]
Minified script [1101 bytes]

Be Sociable, Share!

3 Responses to “Using CSS3 :target selectors”

  1. Paulp Says:

    Is there any way to get this to work when clicking a link from another page ???

  2. Peter Ryan Says:

    Hi Paulp,

    I’m not sure I understand your question, but the intent behind this code is that you can link _to_ a page with this code with a URL containing a fragment identifier and the appropriate :target CSS rule will be applied.

    So if I link to the test page like so:

    none of the :target rules will be applied on page load, but if I link using a fragment identifier:

    then the :target rule is applied and [in this case] the heading “Part Two” is highlighted.

    Hope that helps!


  3. Abas com CSS utilizando :target » CSS no Lanche Says:

    [...] verão que foi utilizado um arquivo JavaScript chamado: csstarget.js, um script desenvolvido por Peter Ryan que faz com que o seletor :target funcione em todos os browsers que não suportam esse seletor [...]