Caution

お使いのブラウザはJavaScriptが無効になっております。
当サイトでは検索などの処理にJavaScriptを使用しています。
より快適にご利用頂くため、JavaScriptを有効にしたうえで当サイトを閲覧することをお勧めいたします。

CSS辞典

トップページ
CSS辞典
【CSSセレクタ】E:target

【CSSセレクタ】E:target

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

サンプルコード

style.css

/* URLハッシュに一致するp要素を赤字に */
p:target { color: red;}

/* ターゲットセクションをハイライト */
section:target { background-color: #fffde7; padding: 16px;}

/* ターゲット時に背景色をなめらかに変更 */
.section:target { background-color: #e3f2fd; transition: background-color 0.5s ease;}

/* ページ内リンクで該当箇所に左ボーダーをつける定番パターン */
#about:target { border-left: 4px solid #3498db; padding-left: 12px;}
#contact:target { border-left: 4px solid #e74c3c; padding-left: 12px;}

ブラウザでの表示結果

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 以降 ○

11 ○

10 ○

9 ○

8 ×

7 ×

6 ×

Opera

9.5 以降 ○

8 以前 ×

モバイル

iOS Safari

2 以降 ○

1 以前 ×

Android Browser

2 以降 ○

Chrome Android