Display CSS DIV if something exists after # in the URL?

Question

Is there a way for CSS to change its properties if there's a value after a "#" in the URL? For example, if I click a link which turns my page from /book.php to /book.php#read, is there a way to make a CSS DIV become visible?

I can probably accomplish this with JavaScript (though it will be a slight pain) but I'm wondering if there's a CSS method which can do this?

Thanks!

I don't think CSS can do this. It's fairly easy with javascript. — Dennisch, May 02 '17 at 13:49
you can get href using window.location.href . it think you cant with css — Mohideen bin Mohammed, May 02 '17 at 13:51
Take a look [here](http://stackoverflow.com/questions/901115/how-can-i-get-query-string-values-in-javascript), reading the querystring.. you can do what you want in ```$(document).ready()``` function. — Dwhitz, May 02 '17 at 13:51
Perhaps the target selector can be of help ... https://www.w3schools.com/cssref/sel_target.asp — Daniel, May 02 '17 at 13:52

score 1 · Answer 1 · edited May 02 '17 at 14:07

If I have understood the question correctly, it is possible to do this with css only using the :target pseudo-class from CSS.

Here is an example of how it works:

:target{
        display: none;
    }

<a href="#content1">Hide Content 1</a>
<a href="#content2">Hide Content 2</a>

<p id="content1">Content 1</p>
<p id="content2">Content 2</p>

you can learn more here:

w3schools

developer.mozilla

Display CSS DIV if something exists after # in the URL?

1 Answers1