MDN wants to talk to developers like you: https://qsurvey.mozilla.com/s3/8d22564490d8

:target

概要

:target 擬似クラス は、文書の URI のフラグメント識別子 (fragment identifier) に一致する id を持った唯一の要素があれば、その要素を表します。

フラグメント識別子をともなった URI は、ターゲット要素 と呼ばれる、文書内のある要素にリンクします。例えば、これは section2 という名前の アンカー を示す URI です:
http://example.com/folder/document.html#section2
id 属性を持った要素はどれも、アンカー になれます。例えば、次の例の <h1 id="section2"> 要素です。この ターゲット要素 h1 を、:target 擬似クラスで表すことができます。

注記: id 属性 HTML 4 で新登場しました(1997 年 12 月)。旧式の HTML では <a name="foo"> がターゲット要素でした。The :target pseudo-class applies to those targets as well.

:target { outline: solid red }  /* draw a red, solid line around the target element */
/* example code for userContent.css or any web pages;
   a red/yellow arrow indicates the target element */  

:target {
 -webkit-box-shadow: 0.2em 0.2em 0.3em #888;
    -moz-box-shadow: 0.2em 0.2em 0.3em #888;
         box-shadow: 0.2em 0.2em 0.3em #888;
}

:target:before {
  font:           70% Arial,"Nimbus Sans L",sans-serif !important;
  content:        "\25ba";  /* ► */
  color:          red;
  background:     gold;
  border:         solid thin;
  padding-left:   1px;
  display:        inline-block;
  margin-right:   0.13em;
  vertical-align: 20%;
}

"display: none;" 要素の操作…

:target 擬似クラスは非表示の要素にも動作します:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>:target pseudoclass example</title>
<style>
#newcomment {
  display: none;
}

#newcomment:target {
  display: block;
}
</style>

</head>
<body>
 <p><a href="#newcomment">Add a comment</a></p>
 <div id="newcomment">
  <form name="myForm">
  <p>Write your comment:<br />
  <textarea name="myTextarea"></textarea></p>
  </form>
 </div>
</body>
</html>

ピュア CSS の "lightbox"

:target 擬似クラスはある要素の表示・非表示の切り替えにも便利です。この方法で JavaScript を使わず、CSS だけで lightbox を作れます。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>MDN Example &ndash; CSS Lightbox</title>
<style>
div.lightbox {
  display: none;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

div.lightbox:target {
  display: table;
}

div.lightbox figure {
  display: table-cell;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  vertical-align: middle;
}

div.lightbox figure figcaption {
  display: block;
  margin: auto;
  padding: 8px;
  background-color: #ddbbff;
  height: 250px;
  position: relative;
  overflow: auto;
  border: 1px #000000 solid;
  border-radius: 10px;
  text-align: justify;
  font-size: 14px;
}

div.lightbox figure .closemsg {
  display: block;
  margin: auto;
  height: 0;
  overflow: visible;
  text-align: right;
  z-index: 5001;
  cursor: default;
}

div.lightbox figure .closemsg, div.lightbox figure figcaption {
  width: 300px;
}

.closemsg::after {
  content: "\00D7";
  display: inline-block;
  position: relative;
  right: -20px;
  top: -10px;
  z-index: 5002;
  color: #ffffff;
  border: 1px #ffffff solid;
  border-radius: 10px;
  width: 20px;
  height: 20px;
  line-height: 18px;
  text-align: center;
  margin: 0;
  background-color: #000000;
  font-weight: bold;
  cursor: pointer;
}

.closemsg::before {
  content: "";
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #000000;
  opacity: 0.85;
}
</style>
</head>

<body>

<h1>Pure CSS Lightbox</h1>

<p>Some sample text&hellip;</p>

<p>[ <a href="#example1">Open example #1</a> | <a href="#example2">Open example #2</a> ]</p>

<p>Another sample text&hellip;</p>

<div class="lightbox" id="example1">
  <figure>
    <a href="#" class="closemsg"></a>
    <figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec felis enim, placerat id eleifend eu, semper vel sem. Sed interdum commodo enim venenatis pulvinar. Proin mattis lorem vitae diam scelerisque hendrerit. Fusce cursus imperdiet mauris, vitae hendrerit velit dignissim a. Suspendisse potenti. Aenean feugiat facilisis diam, in posuere sapien mattis vel. Proin molestie rutrum diam, pharetra feugiat ligula sollicitudin sed. Etiam cursus diam quis tellus aliquam gravida. Aliquam erat volutpat.<br />
    Etiam varius adipiscing mi eget imperdiet. Nulla quis vestibulum leo. Integer molestie massa ut massa commodo in blandit purus aliquam. Mauris sit amet posuere massa. Ut a eleifend augue. Proin sodales mauris nec tellus pharetra dictum.</figcaption>
  </figure>
</div>

<div class="lightbox" id="example2">
  <figure>
    <a href="#" class="closemsg"></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. Etiam ullamcorper augue quis orci posuere et tincidunt augue semper. Maecenas varius augue eu orci auctor bibendum tristique ligula egestas. Morbi pharetra tortor iaculis erat porta id aliquam leo cursus. Ut nec elit vel mauris dapibus lacinia eget sed odio.</figcaption>
  </figure>
</div>

</body>
</html>

この例の実際の表示を見る

ブラウザ実装状況

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari
基本サポート 1.0 Unknown (1.3) 9 9.5 1.3
機能 Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
基本サポート 2.1 1.0 (1.3) 9.0 9.5 2.0

仕様

関連情報

ドキュメントのタグと貢献者

 このページの貢献者: ethertank, sosleepy
 最終更新者: ethertank,