:checkedと:notを使ってcssでフィルタリング

CSS応用

cssのセレクタの「隣接セレクタ」「擬似クラス 」「擬似要素 」などを使用する事で、今までjQuery等を使わないと出来なかった事がcssのみで出来るようになります。

:checked

inputのラジオボタン、チェックボックスの2つのみで使用可能。チェックしたinput要素に「:checked」セレクタが付与される。

:not

notを使う事で指定した要素以外の要素を選択する事が出来る

<div>
<h1>Lorem ipsum dolor sit.</h1>
<h2>Lorem ipsum dolor sit.</h2>
<p>Lorem ipsum dolor sit.</p>
</div>

css

div :not(p){
color: red;
}

フィルタリングの考え方

  • フィルタリングをかけたい要素に「data-category」属性を設定（複数可の場合は内容の“一部”が一致する指定がcssで必要）しておく
  • ラジオボタンのidに各カテゴリー名を設定する
  • 各カテゴリーのラジオボタンがcheckedになったら、対応している「data-category」属性を持った要素以外を非表示にさせる
  • 全てボタンを押したら、全ての要素が表示に
[id="all"]:checked ~ .targets>.target-box{
display: block;
}


[id="カテゴリー名"]:checked ~ .targets>.target-box:not([data-category*="カテゴリー名"]){
display: none;
}

 


webliker.info