Выбор элементов со ссылкой только с помощью CSS

Question

Я хочу выбрать элементы из списка.

a[class="zwart"]:focus~ul li:not([class="zwart"]) {
  height: 0;
  width: 0;
  border: none;
  margin: 0;
  display: none;
}

a[class="grijs"]:focus~ul li:not([class="grijs"]) {
  height: 0;
  width: 0;
  border: none;
  margin: 0;
  display: none;
}

<a href="#" class="all" title="Alles">Alles</a>
<a href="#" class="blauw" title="Blauw">Blauw</a>
<a href="#" class="bruin" title="Bruin">Bruin</a>
<a href="#" class="goud" title="Goud">Goud</a>
<a href="#" class="grijs" title="Grijs">Grijs</a>
<a href="#" class="oranje" title="Oranje">Oranje</a>
<a href="#" class="rood" title="Rood">Rood</a>
<a href="#" class="roze" title="Roze">Roze</a>
<a href="#" class="zwart" title="Zwart">Zwart</a>


<ul>
  <li class="zwart">
    <a href="test.html">
      <img src="https://via.placeholder.com/150">
    </a>
  </li>
  <li class="grijs">
    <a href="test2.html">
      <img src="https://via.placeholder.com/200">
    </a>
  </li>
</ul>

При первом выборе, а затем нажатии в любом месте страницы все изображения снова становятся видимыми, а также при нажатии на изображения.Когда я фильтрую по одному цвету, я все равно хочу перейти по ссылке.Для проекта мы можем использовать только HTML и CSS.Можно ли использовать ссылки и не показывать мне все при нажатии на изображения после использования моего фильтра?