【CSSセレクタ】E:target

『セレクタ:target』で、URLのハッシュ値と同じid要素を持つ要素に適用できます。『ハッシュ値』(フラグメント、アンカー)とはURLに記述されている『#』以降の記述となります。例えば『http://wp-p.info/index.html#hoge』ならば『hoge』がハッシュ値です。こちらは一般に『擬似クラス』(:target擬似クラス)と呼ばれます。IE8以下では動きません。

サンプルコード

p:target { color: red;} /* 『ハッシュ値』と同じid属性を持つp要素を赤字にします。 */

ブラウザでの表示結果

p:target { color: red;} /* 『ハッシュ値』と同じid属性を持つp要素を赤字にします。 */

<a href="#hoge_sample">こちらをクリックするとテキストの色が変わります。</a>
<p id="hoge_sample">色が変更されます。</p>

対応ブラウザ

デスクトップ

Chrome

1 以降 ○

Firefox

1 以降 ○

Safari

1.3 以降 ○

Edge

12 以降 ○

全バージョンで対応しています

IE

11 ○

10 ○

9 ○

8 ×

7 ×

6 ×

Opera

9.5 以降 ○

8 以前 ×

モバイル

iOS Safari

2 以降 ○

1 以前 ×

Android Browser

2 以降 ○

Chrome Android

最新版 ○

デスクトップ版と同等の対応です

Firefox Android

最新版 ○

デスクトップ版と同等の対応です

※ バージョン情報は MDN に基づいています。

トップページへ

Tweet

シェアする