ターゲット擬似クラス (E:target)
CSS3で定義されたターゲット疑似クラスは、アンカーリンクで飛んだ先の要素にスタイルが適用されます。
アンカーリンクとは、
http://css-happylifezero.com/selectors/target.shtml#targetExampleDetail
こんな感じでシャープ(#
)で始まりフラグメント識別子で終わるURLのことです。
- 対応ブラウザ
-
ターゲット擬似クラスのサンプル
:target {
color: red;
font-weight: bold;
}
:target::after {
content: "←ココに飛んできたよ";
padding-left: 5px;
color: #666;
font-weight: normal;
}
<p>
詳しくは下記の「<a href="#targetExampleDetail">月の詳細</a>」をご覧ください。
</p>
<h4 id="targetExampleDetail">月の詳細</h4>
<p>
月とは、地球の周りを公転する...
</p>
アンカーリンクをクリックすると、移動先の要素の文字が太くなったり色が変わったりといった指定が適用されます。
このサンプルを今見ているブラウザで表示すると以下のようになります。
- サンプルのブラウザ上の表示
月の詳細リンクをクリックすると、月の詳細と書かれた見出しが変化するのが確認できます。
ちなみに、このサイトの「サイト説明」で実際に使ってたりします。