CSS3: ページ内リンクの飛び先にスタイルを適用できるE:target 擬似セレクタ

harada 163views 更新:2015年4月20日

ページ内リンクで、飛んだあとのスタイルを指定することができます。つまりリンクをクリックする前と後で表示を変更できます。

CSS

:target {
  color: red;
}

HTML

<ul>
<li><a href="#sample">ページ内リンク</a></li>
</ul>

・
・
・

<h2 id="sample">リンク先</h4>
<p>テキスト</p>

この場合、何もしてない状態と、「ページ内リンク」をクリックした後では「リンク先」のテキスト色が赤く変わります。

参考:ターゲット擬似クラス (E:target)

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません