HTML
<div class="sample">
<input type="radio" name="categories" id="All" value="All" checked>
<label for="All"> All </label>
<input type="radio" name="categories" id="Blue" value="Blue">
<label for="Blue"> Blue </label>
<input type="radio" name="categories" id="Green" value="Green">
<label for="Green"> Green </label>
<input type="radio" name="categories" id="Red" value="Red">
<label for="Red"> Red </label>
<input type="radio" name="categories" id="Square" value="Square">
<label for="Square"> Square </label>
<input type="radio" name="categories" id="Circle" value="Circle">
<label for="Circle"> Circle </label>
<ol class="targets">
<li class="target" data-category="Square">
<div class="square"></div>
</li>
<li class="target" data-category="Circle">
<div class="circle"></div>
</li>
<li class="target" data-category="Blue Square">
<div class="blue square"></div>
</li>
<li class="target" data-category="Blue Circle">
<div class="blue circle"></div>
</li>
<li class="target" data-category="Green Square">
<div class="green square"></div>
</li>
<li class="target" data-category="Green Circle">
<div class="green circle"></div>
</li>
<li class="target" data-category="Red Square">
<div class="red square"></div>
</li>
<li class="target" data-category="Red Circle">
<div class="red circle"></div>
</li>
</ol>
</div>
CSS
* {
margin: 0 auto;
padding: 0;
}
ol {
list-style: none;
}
a {
text-decoration: none;
color: inherit;
}
.targets {
display: grid;
grid-gap: 40px;
grid-template-columns: repeat(auto-fit, 60px);
margin-top: 40px;
}
.circle, .square {
width: 60px;
height: 60px;
background-color: #EEE;
border: 1px solid #CCC;
}
.circle {
border-radius: 50%;
}
.blue {
background-color: #B8DBF6;
border: 1px solid #5ABEED;
}
.green {
background-color: #C8F8D1;
border: 1px solid #64D994;
}
.red {
background-color: #FAD6D7
}
[value="All"]:checked ~ .targets [data-category] {
display: block;
}
[value="Blue"]:checked ~ .targets .target:not([data-category~="Blue"]),
[value="Green"]:checked ~ .targets .target:not([data-category~="Green"]),
[value="Red"]:checked ~ .targets .target:not([data-category~="Red"]),
[value="Square"]:checked ~ .targets .target:not([data-category~="Square"]),
[value="Circle"]:checked ~ .targets .target:not([data-category~="Circle"]) {
display: none;
}