「CSS」擬似クラス:targetの使い方
書式
: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>
<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>
<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>