アンカーリンクをしたときに便利な:target擬似クラス

CSS

ページが長い場合などに、ページ内リンクをよく設置するかと思います。

ただリンクを押したらパッと移動してしまって、該当部分がどこなのかよくわららない時もあります。(最近はゆっくりスクロールしていくJSがついている事も多いですが)

そのときにこの:target擬似クラスを指定すると、その該当部分にCSSで装飾できます。

CSS

アンカーリンクのidを指定します。

#test:target {
color: red;
}

このように記述するとアンカーリンクでid="test"を押したとき、id="test"のテキストが赤くなります。工夫次第でわかりやすいページになるのではないでしょうか。

ここを押してください

ここの色が赤くなります。

対応ブラウザ

IEでは今の所対応していないようです。