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

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

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

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

CSS

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

#test:target {
color: red;
}

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

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

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