: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 のフラグメントに一致する 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 {
/* ... */
}
メモ: 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;
}
結果
純粋な 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, 0.7);
content: "";
cursor: default;
}
結果
仕様書
Specification |
---|
HTML Standard # selector-target |
Selectors Level 4 # the-target-pseudo |
ブラウザーの互換性
BCD tables only load in the browser