「CSS」擬似クラス:targetの使い方

2014年7月15日2021年9月8日

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

使用例

<style>
div:target {
  background-color: gold;
}

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

/* 対象要素の中の i 要素にスタイルを適用 */
div:target i {
  color: red;
}
</style>
<h3>目次</h3>
<ol>
 <li><a href="#pA">段落1</a></li>
 <li><a href="#pB">段落2</a></li>
 <li><a href="#nowhere">リンク対象がない</a></li>
</ol>

<h3>test 122</h3>
<div id="pA">test abc</div>
<div id="pB">test def</div>