:target を使ったサンプル

HTMLはこちら。

<ol>
 <li><a href="#demo1">#demo1へのリンク元</a></li>
 <li><a href="#demo2">#demo2へのリンク元</a></li>
 <li><a href="#">#へのリンク元（このページ全体がリンク先です）</a></li>
</ol>
<article>
  <h3 id="demo1">これは <span>#demo1</span> な h3要素</h3>
  <p>これは p要素。p要素と h3要素は article要素の中に入っています。</p>
</article>
<article>
  <h3 id="demo2">これは <span>#demo2</span> な h3要素</h3>
  <p>これは p要素。p要素と h3要素は article要素の中に入っています。</p>
</article>

CSSはこちら。

h3:target {
	background-color: #e8ffd1;
    }
h3:target::before, .sample1 h3:target::after {
	content: "★";
	color: sienna;
	margin: 0 .3em;
    }
h3:target span {
	color: sienna;
    }

:target-within を使ったサンプル

HTMLは上のサンプルと（ほぼ）同じです。

CSSは、上のCSSにこの指定を足しました。

article:target-within {
	background-color: #ffffd6;  /*articleの背景に淡い黄色を指定しました*/
    }