:target

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

:target は CSS の擬似クラスで、文書内のターゲット要素を選択します。文書が読み込まれたとき、ターゲット要素は文書の URL フラグメント識別子を使用して導出されます。

css
/* 文書のターゲット要素を選択 */
:target {
  border: 2px solid black;
}

例えば、次の URL にはフラグメント識別子（# 記号で示されます）があり、id の setup である要素を、文書のターゲット要素としてマークしています。

url
http://www.example.com/help/#setup

現在の URL が上記の通りの場合、以下の要素が :target セレクターで選択されます。

html
<section id="setup">インストール手順</section>

構文

css
:target {
  /* ... */
}

解説

HTML 文書が読み込まれると、ブラウザーはそのターゲット要素を設定します。要素は URL フラグメント識別子を使用して識別されます。 URL フラグメント識別子がない場合、文書にはターゲット要素はありません。擬似クラス :target を使用すると、文書のターゲット要素のスタイルを設定することができます。要素にフォーカスを合わせたり、強調表示したり、アニメーションさせたりすることができます。

ターゲット要素は、文書が読み込まれたとき、および history.back()、history.forward()、history.go() メソッドが呼び出されたときに設定されます。しかし、history.pushState() および history.replaceState() メソッドが呼び出されても、変更は行われません。

メモ: CSS 仕様書のバグの可能性がありますが、:target はウェブコンポーネント内では動作しません。シャドウルートがターゲット要素をシャドウツリーに渡さないためです。

例

目次

:target 擬似クラスは、目次を構成するためにリンクされたページの部分を強調表示するために使うことができます。

HTML

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

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

ブラウザーの互換性

関連情報