Pure CSS Content Filter

HTML

<section>
  <a href="javascript:void(0)" class="all">All</a>
  <a href="javascript:void(0)" class="pink">pink</a>
  <a href="javascript:void(0)" class="green">green</a>
  <a href="javascript:void(0)" class="blue">blue</a>
  <div class="pink"><p>01</p></div>
  <div class="blue"><p>02</p></div>
  <div class="green"><p>03</p></div>
  <div class="pink"><p>04</p></div>
  <div class="blue"><p>05</p></div>
  <div class="green"><p>06</p></div>
  <div class="blue"><p>07</p></div>
  <div class="green"><p>08</p></div>
  <div class="pink"><p>09</p></div>
  <div class="blue"><p>10</p></div>
</section>

CSS

div[class="pink"] {
    background:#f7c7de;
}
div[class="green"] {
    background:#b5cb94;
}
div[class="blue"] {
    background:#7bcbc6;
}
a:focus[class] {
    background: #ebebeb;
    outline:none;
}
 a[class="pink"]:focus ~ div:not([class="pink"]) {
 height:0px;
 width:0px;
 border:none;
 margin:0;
}
 a[class="green"]:focus ~ div:not([class="green"]) {
 height:0px;
 width:0px;
 border:none;
 margin:0;
}
 a[class="blue"]:focus ~ div:not([class="blue"]) {
 height:0px;
 width:0px;
 border:none;
 margin:0;
}