URLのパラメータによって要素のスタイルを変更する方法 #CSS

jsでやるほどでもないし、cssで出来ないかな〜と調べていたらtargetという擬似クラスが存在するらしい。
よくページ内リンクで使われるあれ「 URL#section1 」みたいなやつです。
ただしくはパラメータではなく、フラグメント識別子という名称で特定の要素に対して操作を行いたい場合に使用するとのこと
http://d.hatena.ne.jp/keyword/%A5%D5%A5%E9%A5%B0%A5%E1%A5%F3%A5%C8%BC%B1%CA%CC%BB%D2

このtarget擬似クラスを使用してスタイルを書いてみる

sample.html

<html>
<head></head>
<body>
  <div class="box" id="box1"></div>
  <div class="box" id="box2"></div>
</body>
</html>

sample.css

.box {
  width: 100px;
  height: 100px;
  margin: 10px;
}
/* box1のid */
.box:target{
  background-color: red;
}
/* notは引数に指定されたid or class以外 */
.box:not(:target){
  background-color: blue;
}

sample.html#box1 にアクセスした場合

sample.html#box2 にアクセスした場合