ピュアCSSでコンテンツフィルター

Result

クリックすると該当するコンテナを除いて非表示になる、というコンテンツフィルターです。
radioのchecked判定を使用します。

css

input[type="radio"] {/*input要素は非表示にしておく*/
    display:none;
}
label {/*label装飾*/
  width:23%;
  float:left;
  text-align:center;
  background:#ffffff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  color:#222222;
  padding:2% 0.5%;
  margin:0.5%;
  margin-bottom:30px;
  cursor:pointer;
}
input[type="radio"][id="blue"]:checked + label {/*青が選択されたときのlabelの色*/
  background:#0092ff;
}
input[type="radio"][id="blue"]:checked ~ .red, input[type="radio"][id="blue"]:checked ~ .green {
/*id="blue"のradioボタンにチェックが入ってる場合は.red、.greenのclassを持ったコンテナを非表示*/
  width:0;
  height:0;
  padding:0;
  margin:0;
  opacity:0;
}
input[type="radio"][id="red"]:checked + label {/*赤が選択されたときのlabelの色*/
  background:#ea4335;
}
input[type="radio"][id="red"]:checked ~ .blue, input[type="radio"][id="red"]:checked ~ .green {
/*id="red"のradioボタンにチェックが入ってる場合は.blue、.greenのclassを持ったコンテナを非表示*/ 
  width:0;
  height:0;
  padding:0;
  margin:0;
  opacity:0;
}
input[type="radio"][id="green"]:checked + label {/*緑が選択されたときのlabelの色*/
  background:#75bd3f;
}
input[type="radio"][id="green"]:checked ~ .blue, input[type="radio"][id="green"]:checked ~ .red {
/*id="green"のradioボタンにチェックが入ってる場合は.blue、.redのclassを持ったコンテナを非表示*/ 
  width:0;
  height:0;
  padding:0;
  margin:0;
  opacity:0;
}

.tile {/*各コンテナのスタイル*/
  width:23%;
  height:100px;
  float:left;
  transition:all 1s;
  margin:0.5%;
  padding:0.5%;
}
.green {
  background:#75bd3f;
}
.blue {
  background:#0092ff;
}
.red {
  background:#ea4335;
}

html

<div class="container"> 
  <input type="radio" id="blue" name="color" />
  <label for="blue">青</label>
  <input type="radio" id="red" name="color"/>
  <label for="red">赤</label>
  <input type="radio" id="green" name="color"/>
  <label for="green">緑</label>
  <input type="radio" id="reset" name="color"/>
  <label for="reset">全て</label>

  <div class="tile blue">1</div>
  <div class="tile red">2</div>
  <div class="tile blue">3</div>
  <div class="tile green">4</div>
  <div class="tile blue">5</div>
       .
       .
       .
</div>

via

Pure CSS content filter