:target 疑似クラス

このページの目的

CSS の :target 擬似クラスを試す。

:target - CSS: カスケーディングスタイルシート | MDN に載っている例を試す。

:target 擬似クラスとは？

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

1. 例えば以下のHTMLを記述しておく。

   • <a href="#p1">xxxx<a>

   • <p id="p1">xxxx<p>

2. それに対して

   p:target { ...  }

   という CSS を記述しておく。
3. #p1 のリンクがクリックされる。
4. id属性値として p1 が指定された要素に、:target のスタイルが適用される。

デモ1

そもそもURLフラグメントを指定したリンクをクリックすると、そのフラグメント文字列を id 属性値として持つ要素に移動するが、: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;
}

• :target を使わず、要素のCSS class をJavaScriptで追加/削除すればよいのでは？ 但し、削除のタイミングが少し難しい。

デモ2

こちらは少し特殊な例になる。JavaScript を用いることなくCSSのみを使ってライトボックスを表示する。

おそらくこんな使い方はしないので、覚える必要はない。

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

参考

• :target - CSS: カスケーディングスタイルシート | MDN
• HTML Standard
• Selectors Level 4