Как изменить цвет текста с помощью переключателя?

Question

Я делаю сегментированный переключатель, и я пытаюсь использовать переход для изменения цвета текста, но по какой-то причине изменение цвета текста не работает.

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

Это CSS стиль:

#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; 
} 

Это 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 --> 

Я не могу понять, почему цвет шрифта не изменится, когда я нажимаю на разделители меток.

Answer 1

Это не работает, потому что элементы флажка input не являются братьями и сестрами с текстовыми элементами (#Favorites_Text/#All_Text). Вам нужно выбрать элементы sibling label, а затем выбрать из них потоковые текстовые элементы.

Другими словами, вы бы изменить:

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

к:

#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; 
} 

Как примечание стороны, я также добавил переход к элементу .Switch_Text так что переход происходит до и после проверки флажков.

Если переход добавляется при проверке флажков, переход происходит только при их снятии.