:target
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
:target は CSS の擬似クラスで、文書内のターゲット要素を選択します。文書が読み込まれたとき、ターゲット要素は文書の URL フラグメント識別子を使用して導出されます。
/* 文書のターゲット要素を選択 */ :target { border: 2px solid black; } 例えば、次の URL にはフラグメント識別子（# 記号で示されます）があり、id の setup である要素を、文書のターゲット要素としてマークしています。
http://www.example.com/help/#setup 現在の URL が上記の通りの場合、以下の要素が :target セレクターで選択されます。
<section id="setup">インストール手順</section> 構文
:target { /* ... */ } 解説
HTML 文書が読み込まれると、ブラウザーはそのターゲット要素を設定します。要素は URL フラグメント識別子を使用して識別されます。 URL フラグメント識別子がない場合、文書にはターゲット要素はありません。擬似クラス :target を使用すると、文書のターゲット要素のスタイルを設定することができます。要素にフォーカスを合わせたり、強調表示したり、アニメーションさせたりすることができます。
ターゲット要素は、文書が読み込まれたとき、および history.back()、history.forward()、history.go() メソッドが呼び出されたときに設定されます。しかし、history.pushState() および history.replaceState() メソッドが呼び出されても、変更は行われません。
メモ: CSS 仕様書のバグの可能性がありますが、:target はウェブコンポーネント内では動作しません。シャドウルートがターゲット要素をシャドウツリーに渡さないためです。
例
目次
:target 擬似クラスは、目次を構成するためにリンクされたページの部分を強調表示するために使うことができます。
HTML
<h3>目次</h3> <ol> <li><a href="#p1">第 1 段落にジャンプ！</a></li> <li><a href="#p2">第 2 段落にジャンプ！</a></li> <li> <a href="#nowhere"> このリンクにはターゲットがないので、どこにも行きません。 </a> </li> </ol> <h3>面白い記事</h3> <p id="p1"> URL フラグメントを使うと<i>この段落</i>をターゲットにすることができます。上記のリンクをクリックして試してみてください。 </p> <p id="p2"> これは<i>別な段落</i>であり、やはり上記のリンクからアクセスできます。喜ばしいことだと思いませんか。 </p> CSS
p:target { background-color: gold; } /* 対象要素に擬似要素を追加 */ p:target::before { font: 70% sans-serif; content: "►"; color: limegreen; margin-right: 0.25em; } /* 対象要素の中の i 要素にスタイルを適用 */ p:target i { color: red; } 結果
仕様書
| Specification |
|---|
| HTML # selector-target |
| Selectors Level 4 # target-pseudo |
ブラウザーの互換性
Loading…