Is it possible to link to the same page with different CSS conditions active, depending on which Link I clicked on?

Question

I have three different Links that all lead to the same page. But I need the page to load with different CSS settings (depending on which link was clicked, certain elements should be hidden on the new page).

Is that possible? Thank you!

Answer 1

Sure, you can use the :target pseudo-class to do so.

From MDN :

The :target CSS pseudo-class represents a unique element ( the target element ) with an id matching the URL's fragment.

With target , you click a link, like page.html#some-condition , and in your CSS , listen for that condition. When the id matches the hash in the address bar, you have a match and the target is met.

<a href="#some-condition">A link</a>
<div id="some-condition"></div>

#some-condition:target {
  /* style appropriately */
}

Here's a quick demo. In this case, the links contain the id s, but as demonstrated above, you can structure things however you'd like.

 #red:target ~.result { background-color: red; } #blue:target ~.result { background-color: blue; } #green:target ~.result { background-color: green; }.result { width: 100px; height: 100px; display: inline-block; border: 1px solid; background-color: #fff; transition: 0.3s background-color; }

 <a id="red" href="#red">Red</a> <a id="blue" href="#blue">Blue</a> <a id="green" href="#green">Green</a> <div class="result"></div>

jsFiddle