:target

CSS:target 疑似クラスは、 URL のフラグメントに一致する id を持つ固有の要素 (対象要素) を表します。

/* 現在の URL のフラグメントに一致する ID を持つ要素を選択 */
:target {
  border: 2px solid black;
}

例えば、以下の URL には section2 と呼ばれる要素を指すフラグメント (# 記号で記述) があります。

http://www.example.com/index.html#section2

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

<section id="section2">Example</section>

構文

: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>My Fun Article</h3>
<p id="p1">You can target <i>this paragraph</i> using a
  URL fragment. Click on the link above to try out!</p>
<p id="p2">This is <i>another paragraph</i>, also accessible
  from the links above. Isn't that delightful?</p>

CSS

p:target {
  background-color: gold;
}

/* 対象要素に疑似要素を追加 */
p:target::before {
  font: 70% sans-serif;
  content: "►";
  color: limegreen;
  margin-right: .25em;
}

/* 対象要素の中の i 要素にスタイルを適用 */
p:target i {
  color: red;
}

結果

純粋な CSS のライトボックス

:target 疑似クラスを使用して JavaScript を使わずにライトボックスを作成することができます。この技術はページ内の最初は非表示の要素をリンクを作ることができることを利用しています。いったん対象となれば、 CSS で display を変更して表示させます。

メモ: :target 疑似クラスを使用した純粋な CSS のライトボックスのもっと完全な版は、 GitHub で利用できます (デモ)。

HTML

<ul>
  <li><a href="#example1">例1を開く</a></li>
  <li><a href="#example2">例2を開く</a></li>
</ul>

<div class="lightbox" id="example1">
  <figure>
    <a href="#" class="close"></a>
    <figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      Donec felis enim, placerat id eleifend eu, semper vel sem.</figcaption>
  </figure>
</div>

<div class="lightbox" id="example2">
  <figure>
    <a href="#" class="close"></a>
    <figcaption>Cras risus odio, pharetra nec ultricies et,
      mollis ac augue. Nunc et diam quis sapien dignissim auctor.
      Quisque quis neque arcu, nec gravida magna.</figcaption>
  </figure>
</div>

CSS

/* 開いていないライトボックス */
.lightbox {
  display: none;
}

/* 開いたライトボックス */
.lightbox:target {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ライトボックスの中身 */
.lightbox figcaption {
  width: 25rem;
  position: relative;
  padding: 1.5em;
  background-color: lightpink;
}

/* 閉じるボタン */
.lightbox .close {
  position: relative;
  display: block;
}

.lightbox .close::after {
  right: -1rem;
  top: -1rem;
  width: 2rem;
  height: 2rem;
  position: absolute;
  display: flex;
  z-index: 1;
  align-items: center;
  justify-content: center;
  background-color: black;
  border-radius: 50%;
  color: white;
  content: "×";
  cursor: pointer;
}

/* ライトボックスのオーバーレイ */
.lightbox .close::before {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  position: fixed;
  background-color: rgba(0,0,0,.7);
  content: "";
  cursor: default;
}

結果

仕様書

仕様書 状態 備考
HTML Living Standard
:target の定義
現行の標準 HTML 特有の意味論を定義。
Selectors Level 4
:target の定義
草案 変更なし。
Selectors Level 3
:target の定義
勧告 初回定義。

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
:targetChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1IE 完全対応 9Opera 完全対応 9.5Safari 完全対応 1.3WebView Android 完全対応 2Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 10.1Safari iOS 完全対応 2Samsung Internet Android 完全対応 1.0

凡例

完全対応  
完全対応

関連情報