Pure CSS solution - When a radio button is checked I want labeled elements to go either visible or hidden

Question

I have four radio buttons to toggle the visibility of:

1. MINES

2. MINES INCLUDING SILICIUM

3. MINES INCLUDING PHOSPHATE

4. MINES INCLUDING GOLD

   <label> 
           <input type="radio" name="mineRadio" 
                  id="allmines" checked> All
   </label> 
   <label> 
           <input type="radio" name="mineRadio"
                  id="sili"> Silicium
   </label> 
       <label> 
           <input type="radio" name="mineRadio"
                  id="phos"> Phosphate
   </label> 
       <label> 
           <input type="radio" name="mineRadio"
                  id="gold"> Gold
   </label> 
   

The mines are circle-shaped elements on top of a map:

<a href="#mine1" id="mine1" style="top: 74.72%; left: 25.89%; width: 1vw; height: 1vw;" class="sili phosp"></a>
<a href="#mine2" id="mine2" style="top: 45.25%; left: 45.21%; width: 1vw; height: 1vw;" class="phosp"></a>
<a href="#mine3" id="mine3" style="top: 54.22%; left: 25.89%; width: 1vw; height: 1vw;" class="gold"></a>
<a href="#mine4" id="mine4" style="top: 41.75%; left: 75.34%; width: 1vw; height: 1vw;" class="phosp gold"></a>
<a href="#mine5" id="mine5" style="top: 78.72%; left: 25.49%; width: 1vw; height: 1vw;" class="sili phosp gold"></a>
<a href="#mine6" id="mine6" style="top: 47.42%; left: 88.65%; width: 1vw; height: 1vw;" class="phosp"></a>
<a href="#mine7" id="mine7" style="top: 21.85%; left: 10.42%; width: 1vw; height: 1vw;" class="phosp"></a>
<a href="#mine8" id="mine8" style="top: 14.21%; left: 32.85%; width: 1vw; height: 1vw;" class="sili gold"></a>
<a href="#mine9" id="mine9" style="top: 65.64%; left: 31.21%; width: 1vw; height: 1vw;" class="sili"></a>

When for instance the 'Silicium Mine' button is checked, I want the mines with Silicium to be visible and the ones without this attribute to hide.

How can I set the mines' displays to visible/hidden according to which radio button is checked?

Answer 1

You need a structure where sibbling selector can be used , parent selector is not avalaible in pure CSS. So you need to take inputs out of labels and use the for attribute to link each labels with its related input (can work without it, but click on the label won't be usable).

Example of a structure that can used with the :checked pseud-class and sibbling selector ~

/* Demo : toggle display from an id attribute to later sibblings of a specific class */a {
  border: solid;
  display: none;
}

a:before {/* show them by their class names */
  display: inline-block;
  content: attr(class);
  padding:0.15em 0.5em;
}

#map {margin:1em;padding:1em;border:solid;}
#sili:checked ~ #map .sili,
#phos:checked ~ #map .phosp,
#gold:checked ~ #map .gold,
#allmines:checked ~ #map a {
  display: inline;
}

<input type="radio" name="mineRadio" id="allmines" checked> <label for='allmines'> All
</label>

<input type="radio" name="mineRadio" id="sili"><label for='sili'> Silicium
</label>

<input type="radio" name="mineRadio" id="phos"> <label for='phos'> Phosphate
</label>

<input type="radio" name="mineRadio" id="gold"> <label for='gold'> Gold
</label> The mines are circle-shaped elements on top of a map:
<div id="map">
<a href="#mine1" id="mine1" style="top: 74.72%; left: 25.89%; width: 1vw; height: 1vw;" class="sili phosp"></a>
<a href="#mine2" id="mine2" style="top: 45.25%; left: 45.21%; width: 1vw; height: 1vw;" class="phosp"></a>
<a href="#mine3" id="mine3" style="top: 54.22%; left: 25.89%; width: 1vw; height: 1vw;" class="gold"></a>
<a href="#mine4" id="mine4" style="top: 41.75%; left: 75.34%; width: 1vw; height: 1vw;" class="phosp gold"></a>
<a href="#mine5" id="mine5" style="top: 78.72%; left: 25.49%; width: 1vw; height: 1vw;" class="sili phosp gold"></a>
<a href="#mine6" id="mine6" style="top: 47.42%; left: 88.65%; width: 1vw; height: 1vw;" class="phosp"></a>
<a href="#mine7" id="mine7" style="top: 21.85%; left: 10.42%; width: 1vw; height: 1vw;" class="phosp"></a>
<a href="#mine8" id="mine8" style="top: 14.21%; left: 32.85%; width: 1vw; height: 1vw;" class="sili gold"></a>
<a href="#mine9" id="mine9" style="top: 65.64%; left: 31.21%; width: 1vw; height: 1vw;" class="sili"></a>
</div>

infos about duos input/label : https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label

The HTML <label> element represents a caption for an item in a user interface.

the for attribute

for The id of a labelable form-related element in the same document as the <label> element. The first element in the document with an id matching the value of the for attribute is the labeled control for this label element if it is a labelable element. If it is not labelable then the for attribute has no effect. If there are other elements that also match the id value, later in the document, they are not considered. Note: A <label> element can have both a for attribute and a contained control element, as long as the for attribute points to the contained control element.

Infos about the sibbling selectors : https://css-tricks.com/child-and-sibling-selectors/