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

cssの疑似クラスって結構あるんですよね。

動作といったらjQueryとかで記述しちゃいがちなのですが、cssだけでも様々な動作が作れます。
cssで済んだほうが楽だし軽量なので、できる限りcssだけで済ませたいものです。

忘れないように、動作を作成する際有用な:target疑似クラスについて今回はメモしていきます。

以下で、要素の移動とモーダルウィンドウをcssのみで作成してみました。
HTMLとSCSSのタブを切り替えてコードを見てみてください。

See the Pen target css by nao (@kumapoyo) on CodePen.

動作をつけたい要素にHTMLでidを指定し、cssで:targetを付けます。

動作をつけたい要素へのアンカーリンクをクリックした際に発火します。

:not疑似クラスを使用し、:targetではない場合にもtransitionでスムーズに戻るようにしています。