:target は CSS の擬似クラスは、 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 を変更して表示させます。

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; }

結果

仕様書

ブラウザーの互換性

Update compatibility data on GitHub デスクトップ モバイル Chrome Edge Firefox Internet Explorer Opera Safari Android webview Android 版 Chrome Android 版 Firefox Android 版 Opera iOSのSafari Samsung Internet :target Chrome 完全対応 1 Edge 完全対応 12 Firefox 完全対応 1 IE 完全対応 9 Opera 完全対応 9.5 Safari 完全対応 1.3 WebView Android 完全対応 2 Chrome Android 完全対応 18 Firefox Android 完全対応 4 Opera Android 完全対応 10.1 Safari iOS 完全対応 2 Samsung Internet Android 完全対応 1.0 凡例 完全対応 完全対応

関連情報