JavaScript querySelector and CSS :target pseudo-class

Question

JavaScript querySelector and CSS :target pseudo-class

1.2k Views Asked by Baptistou At 04 April 2025 at 21:31

I am trying to get the targeted element with the pseudo-class :target after document load. I created the following example to illustrate the problem.

<!DOCTYPE html>
<html>
    <head>
        <script>
            document.addEventListener("DOMContentLoaded",function(){
                console.log(document.querySelector(":target"));
            });
        </script>
    </head>
    <body>
        <div id="test"></div>
    </body>
</html>

If I load test.html, then the console outputs :

null

If I load test.html#test on Chrome and Opera, then the console outputs :

null

If I load test.html#test on Firefox and IE11, then the console outputs :

<div id="test"></div>

My questions are :

Which browsers have the correct behaviour ?
Does DOMContentLoaded is the correct event to call querySelector(":target") ?
Is there another way to get targeted element after document load ?

PS : I succeeded to fix the problem on Chrome and Opera thanks to setTimeout but It is not a good solution. Does someone has a better idea ?

EDIT : I found a similar issue with JQuery Selecting :target on document.ready()

Original Q&A

There are 2 best solutions below

**Rounin** · Answer 1

It looks like Firefox has the ideal behaviour, though maybe not the correct one.

Nevertheless, as an alternative, you can use:

document.addEventListener('DOMContentLoaded', () => document.querySelector(window.location.hash));

and that will work in all browsers.

**BoltClock** · Answer 2

This is a known issue with WebKit- and Blink-based browsers that has never been directly addressed. The workaround suggested by web-platform-tests is to request an animation frame, which only happens after page rendering, at which point the :target pseudo seems to match successfully:

async_test(function() {
  var frame = document.createElement("iframe");
  var self = this;
  frame.onload = function() {
    // :target doesn't work before a page rendering on some browsers.  We run
    // tests after an animation frame because it may be later than the first
    // page rendering.
    requestAnimationFrame(self.step_func_done(init.bind(self, frame)));
  };
  frame.src = "ParentNode-querySelector-All-content.xht#target";
  document.body.appendChild(frame);
})

My testing shows that simply using onload works fine, but the author may be on to something and besides, a single call to requestAnimationFrame() costs practically nothing, so you may as well follow suit.

The following test uses onload (as opposed to DOMContentLoaded, which fires immediately after the DOM tree has been constructed but not necessarily rendered):

data:text/html,<!DOCTYPE html><script>window.onload=function(){console.log(document.querySelector(":target"));};</script><div id="test"></div>#test

The following test uses requestAnimationFrame() in conjunction with onload:

data:text/html,<!DOCTYPE html><script>window.onload=requestAnimationFrame(function(){console.log(document.querySelector(":target"));});</script><div id="test"></div>#test

JavaScript querySelector and CSS :target pseudo-class

There are 2 best solutions below

Related Questions in JAVASCRIPT

Related Questions in CSS-SELECTORS

Related Questions in PSEUDO-CLASS

Related Questions in SELECTORS-API

Related Questions in DOMCONTENTLOADED

Trending Questions

Popular # Hahtags

Popular Questions