JavaScriptは使わず、CSS3でコンテンツフィルターを実装する

土曜日なのでちょっとしたネタ。
JavaScript無しで、CSSのみで
コンテンツフィルターを実装する
方法をご紹介。実用性は無いので
こんな事も出来るんだねくらいに
受け止めていただけると。

CSSのみでコンテンツをフィルタリングする、というもの。サンプルどうぞ。

Sample

Chomre、Safari推奨です。JavaScriptは使用してません。

CSS

div[class="pink"] {background:#f7c7de;}
div[class="green"] {background:#b5cb94;}
div[class="blue"] {background:#7bcbc6;}

↑ まず、色分け。これは属性セレクタじゃなくてもいいです。

a {
    -webkit-transition:all .5s linear;
    -moz-transition:all .5s linear;
    -o-transition:all .5s linear;
    -ms-transition:all .5s linear;
    transition:all .5s linear;
}

↑ アニメーションエフェクトはtransitionを使用しています。

a:focus[class] {outline:none;}

↑ フォーカスを利用するので選択中に出る枠を消します。賛否あると思うのでお好みでなんかしてあげてください。

a[class="pink"]:focus ~ div:not([class="pink"]),
a[class="green"]:focus ~ div:not([class="green"]),
a[class="blue"]:focus ~ div:not([class="blue"]){
 height:0px;
 width:0px;
 border:none;
 margin:0;
}

↑ 否定擬似クラスの:notを使って、フォーカス中の要素に該当するdiv以外のdiv要素を見えないようにする。

a[class=”pink”]:focus ~ div:not([class=”pink”])なら、<a class=”pink”>を選択中(:focus)は<div class=”pink”>以外を取得(:not)しますので、その取得したアイテムを表示しない、という形でフィルタリング出来ます。

否定擬似クラスはあまり聞き慣れないかも知れませんが、jQueryでは一般的なDOM操作で使われます。このようなフィルタは以前まとめたので動作の確認もあわせてどうぞ。

ただ、これだけじゃ出来ません。なのでHTMLにもう一工夫します。

<a href="javascript:void(0)" class="all" tabindex="-1">All</a>
<a href="javascript:void(0)" class="pink" tabindex="-1">pink</a>
<a href="javascript:void(0)" class="green" tabindex="-1">green</a>
<a href="javascript:void(0)" class="blue" tabindex="-1">blue</a>