Change the style of an element if the fragment identifier (hash) in the URL references it

Question

Is there a way, in pure CSS, to change the style of an element if the fragment identifier (hash) in the URL references it?

i.e.

Given this HTML:

<p id="reference">lorem ipsum</p>

And this URL:

http://example.com/#reference

The browser will scroll to the paragraph with the id of reference, but can I change the style of that element without JavaScript?

I thought I could do this with the :focus psuedo-class, but it did not work. And the other 3 deal with mouse events (:hover, :active) and URLs (:visited), so none of these would work.

Answer 1

It’s easily done with CSS only, no JavaScript needed. Use the :target pseudo-class selector:

p#reference:target{background-color:gold;}

<p id="reference">lorem ipsum</p>
<a href="#reference">to target</a>
<a href="#">untarget</a>

Also read MDN for browser support (IE9+) and additional information.

Answer 2

There should be a :target selector that does exactly this, with reasonable support.