トップページの中の セレクタの中の ターゲット擬似クラス (E:target)

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

  • 最終更新:2009年7月 5日 10:07

CSS3で定義されたターゲット疑似クラスは、アンカーリンクで飛んだ先の要素にスタイルが適用されます。

アンカーリンクとは、
http://css-happylifezero.com/selectors/target.shtml#targetExampleDetail
こんな感じでシャープ(#)で始まりフラグメント識別子で終わるURLのことです。

対応ブラウザ
  • IE6未対応
  • IE7未対応
  • IE8未対応
  • Firefox3.5対応
  • Opera10対応
  • Safari4対応
  • Chrome3対応

ターゲット擬似クラスのサンプル

: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>

アンカーリンクをクリックすると、移動先の要素の文字が太くなったり色が変わったりといった指定が適用されます。

このサンプルを今見ているブラウザで表示すると以下のようになります。

サンプルのブラウザ上の表示

詳しくは下記の「月の詳細」をご覧ください。

月の詳細

月とは、地球の周りを公転する...

月の詳細リンクをクリックすると、月の詳細と書かれた見出しが変化するのが確認できます。
ちなみに、このサイトの「サイト説明」で実際に使ってたりします。

  • CSS HappyLife
  • underHat
著書(全て共著)

このページの上部へ