ブラウザのサポート状況の変化に伴い、JavaScriptで実装していた技術もCSSだけで実装することができるようになりました。
JavaScriptで実装していた技術をCSSで実装しようとするときによく使うのが、「:checked」「:target」などのCSS3のセレクタとCSS transitionsの組み合わせです。
今回は「:target疑似クラス」を中心に、JavaScriptで実装していた技術をCSSだけで実装するテクニックをいくつかピクアップしてみました。

:target疑似クラスを利用したモーダルウィンドウ

See the Pen Modal – Pure CSS (no JavaScript) – 2013 by Felipe Fialho (@LFeh) on CodePen.

:target疑似クラスを使用して、要素を表示・非表示、transformで子要素を2D移動させることで、モーダルウィンドウを実装しています。

:target疑似クラスを利用した画像の拡大表示

See the Pen Target Image Zoom by GRAY GHOST (@grayghostvisuals) on CodePen.

:target疑似クラスを使用して、要素を拡大しています。
一般兄弟結合子（E ~ F）と:target疑似クラスを組み合わせることで、要素を表示・非表示させています。

:target疑似クラスを利用したアコーディオン

See the Pen CSS Accordion by pollardld (@pollardld) on CodePen.

アコーディオンもCSSのみで実装できます。
三角のアイコン（アイコンももちろんCSSのみで実装）をrotateを使用して向きを変えたりと、細かいところまでちゃんと作られているので、参考になりますね。

:target疑似クラスを利用したスライダー

See the Pen Pure CSS Slideshow Gallery by Roko C. Buljan (@rokobuljan) on CodePen.

スライダーもCSS3だけで実装されています。CSSもHTMLも非常にシンプルです。
レスポンシブ対応なのも嬉しいですね。

番外編：マテリアルデザイン風のインプット要素（:focus）

See the Pen Google Material Design Input Boxes by Chris Sevilleja (@sevilayha) on CodePen.

こちらは番外編で:focus擬似クラスを使ってマテリアルデザイン風のインプット要素のデザインを実装しています。こちらもシンプルなCSSで実装できるのが嬉しいですね。

他にもオフキャンパスナビゲーションなども:target疑似クラスで実装できたりするようです。
ちなみに、ここではご紹介していないのですが、私は固定ヘッダーを利用した際のアンカーリンクの位置調整という、地味なテクニックで:target疑似クラスをよく使っています。

セレクタを上手に利用することで、シンプルで軽量なソースを実現することができるため、私もまとめながら、普段あまり使わないセレクタをもっと利用してみたいなぁと思いました。

（この記事はQriousオリジナルです）