target疑似クラスを使うと、id名を利用したページ内リンクをクリックしたときに、リンク先に対してCSSを適用させることができます。
工夫次第でスクリプトを使用せずにちょっとした仕掛けを作成できます。
E:target {プロパティ名:値;}
Eはリンク先の要素を指定するのがポイントです。
次のサンプルはリストにページ内リンクを設定しています。
リンクをクリックするとリンク先のh2要素のbackground-imageが別の画像に入れ替わります。
別のリンク先をクリックすると先ほどのh2要素の背景が元の画像に戻ります。
簡単にできますので、少し工夫して小品を作成すると良いでしょう。
target疑似クラスのサンプル
次は疑似クラスを使用してアコーディオンを作成したサンプルです。dtをクリックするとddが開く仕組みです。
target疑似クラス使用のアコーディオンのサンプル
参考のためによく見るjQueryを使用したアコーディオンのサンプルも置いておきます。
jQuery使用のアコーディオンのサンプル
