How do I change the color of text from a radio button?

I’m making a segmented switch and I’m trying to use transition to change the color of text, but for some reason the text color change isn’t working.

https://jsfiddle.net/zp2z2bvw/1/

This is the CSS styling:

#Favorites_Switch:checked ~ #Selected_Container {
  position: absolute;
  left: 50%;
  transition: all .15s ease;
  border-radius: 0px 5px 5px 0px;
}

#Favorites_Switch:checked ~ #Favorites_Text {
  color: #38D1A9;
  transition: color .2s ease;
}

#Favorites_Switch:checked ~ #All_Text {
  color: #FFFFFF;
  transition: color .2s ease;
}

#All_Switch:checked ~ #Selected_Container {
    position: absolute;
    left: 0%;
  transition: all .15s ease;
}

This is the html.

<div id="Segmented_Control">
  <input type="radio" name="Switch" value="All" id="All_Switch" class="Radio_Switch"/>
  <input type="radio" name="Switch" value="Favorites" id="Favorites_Switch" class="Radio_Switch"/>


  <div id="Selected_Container">
  </div> <!-- Selected Container -->


  <label for="All_Switch">
    <div class="Switch_Containers" id="All_Container">
        <p class="Switch_Text" id="All_Text">All</p> <!-- All Switch -->
    </div>
  </label> <!-- All Switch Label -->


  <label for="Favorites_Switch">
    <div class="Switch_Containers" id="Favorites_Container">
        <p class="Switch_Text" id="Favorites_Text">Favorites</p> <!-- Favorites Switch -->
    </div> <!-- Favorites Container -->
  </label>
</div> <!-- Segmented Control -->

I can’t figure out why the font color won’t change when I press on the label divs.


solution

It’s not working because the input checkbox elements are not siblings with the text elements (#Favorites_Text/#All_Text). You need to select the sibling label elements, and then select the descendant text elements from there.

In other words, you would change:

#Favorites_Switch:checked ~ #Favorites_Text { ... }
#Favorites_Switch:checked ~ #All_Text { ... }

to:

#Favorites_Switch:checked ~ label #Favorites_Text { ... }
#Favorites_Switch:checked ~ label #All_Text { ... }

Updated Example

#Favorites_Switch:checked ~ label #Favorites_Text {
  color: #38D1A9;
}
#Favorites_Switch:checked ~ label #All_Text {
  color: #FFFFFF;
}

As a side note, I also added the transition to the element .Switch_Text so that the transition occurs before and after the checkboxes are checked.

If the transition is added when the checkboxes are checked, then the transition will only occur when unchecking them.