CODEWITHSUNDEEP
css
ZomoXYZ
ZomoXYZ

Reputation: 1852

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

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.

Upvotes: 18

Views: 6000

Answers (2)

dakab
dakab

Reputation: 5875

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.

Upvotes: 25

LarsW
LarsW

Reputation: 1588

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

Upvotes: 3

Related Questions