:target擬似クラスと::after要素を使って、選択状態を表示します。

サンプルの横並びボタンは、フラグメント識別子「#」のついたURIを使って、同じHTML内のターゲット要素(下側のdiv)にリンクしています。

ボタンのhtmlソース(最初の例、以下同様)

<li><a href="#item01">item01</a></li>

下側のdivのhtmlソース(最初の例、以下同様)

<div id="item01">id属性値"item01"を持つdiv要素</div>

任意のボタンをクリックすると、そのボタンのhrefで指定したターゲット要素(div)に飛びます。CSSの:target擬似クラスで飛び先の文字色を#777から#000に変更し、同時に::after要素を使って、div要素の後ろにcolor:redの文字列を追加しています。

CSSソース

div:target {
	color: #000;
	}
div:target:after {
	content:  " ←この要素を選択しています";
	color: red;
	}

サンプル

id属性値"item01"を持つdiv要素
id属性値"item02"を持つdiv要素
id属性値"item03"を持つdiv要素
id属性値"item04"を持つdiv要素
id属性値"item05"を持つdiv要素
id属性値"item06"を持つdiv要素
id属性値"item07"を持つdiv要素

戻るボタン