a[data-filter="color"]:focus ~ div:not([data-filter="color"])

Element Filtering Using data-* attribute, :focus, and ~ selector

HTML

<section>
  <a href="#" data-filter="all" tabindex="-1">ALL</a>
  <a href="#" data-filter="red" tabindex="-1">RED</a>
  <a href="#" data-filter="green" tabindex="-1">GREEN</a>
  <a href="#" data-filter="blue" tabindex="-1">BLUE</a>

  <div data-filter="red"></div>
  <div data-filter="blue"></div>
  <div data-filter="red"></div>
  <div data-filter="blue"></div>
  <div data-filter="green"></div>
  <div data-filter="red"></div>
  <div data-filter="red"></div>
  <div data-filter="red"></div>
  <div data-filter="blue"></div>
  <div data-filter="green"></div>
  <div data-filter="blue"></div>
  <div data-filter="green"></div>
  <div data-filter="green"></div>
</section>

CSS

section {
  display: block;
  /* float: left; */
  min-height: 20em;
  width: 100%;
}

a {
  display: block;
  float: left;
  width: 25%;
  text-decoration: none;
  text-align: center;
  padding: 0.5em 0;
  color: white;
  background: #1271C7;
}



div[data-filter="red"] {
  background: hotpink;
}

div[data-filter="green"] {
  background: springgreen;
}

div[data-filter="blue"] {
  background: dodgerblue;
}

a:focus[data-filter] {
  opacity: .8;
  //outline: none;
}

a[data-filter="red"]:focus ~ div:not([data-filter="red"]) {
  margin: 0;
  transform: scale(0);
}

a[data-filter="green"]:focus ~ div:not([data-filter="green"]) {
  margin: 0;
  transform: scale(0);
}

a[data-filter="blue"]:focus ~ div:not([data-filter="blue"]) {
  margin: 0;
  transform: scale(0);
}