【CSS3】疑似クラス :target の使用方法

今回は、「疑似クラス :target 」の使用方法をご説明いたします。

CSS3なので、割と新しめの疑似クラスなんですが…これがまた楽しい機能なんですよ。
とりあえず、サンプルのHTMLを張ります。

疑似クラス :target サンプル
https://revenue-test.biz/test_html/target.html

どうでしょう?
以前だと、Javascriptでしかできなかった動きが、CSSのみで可能ですよね。

<a>アンカータグで、ID指定(<a href="#target_1">●●●●●●</a>のように)した場合に、ID指定した個所にCSSを定義できるという素晴らしいものになっております。
これによって、ページ内リンクとしてだけでなくて、ページ内に様々な動きを付けることが可能になりました。
<a>アンカータグをクリックしただけで、ターゲット指定した個所のCSSを変更できるわけなので、アイデア次第では無限の可能性があると思います。
(ただし、HTML内容の変更、テキスト内容の変更などはできません。:before :after と組み合わせたら、ちょっとだけテキストはいじることもできそうですが…)

使い方によっては、かなり使えそうですよね♪

この記事が気に入ったらサポートをしてみませんか?