id指定をしてラジオボタンの色とラベルの色を変更するには

Question

<div class="container">
    
    <h2>radioボタンカスタマイズ</h2>
    
  <ul>
  <li>
    <input type="radio" id="f-option" name="selector">
    <label for="f-option">Pizza</label>
    
    <div class="check"></div>
  </li>
  
  <li>
    <input type="radio" id="s-option" name="selector">
    <label for="s-option">Bacon</label>
    
    <div class="check"><div class="inside"></div></div>
  </li>
  
  <li>
    <input type="radio" id="t-option" name="selector">
    <label for="t-option">Cats</label>
    
    <div class="check"><div class="inside"></div></div>
  </li>
</ul>
</div>

input[type=radio]:checked ~ .check {
  border: 5px solid blue;
}

input[type=radio]:checked ~ .check::before{
  background: blue;
}

input[type=radio]:checked ~ label{
  color: blue;
}

現状だと、全てのラジオボタンの色が変更になるのですが、
id指定したものだけのラジオボタンの色を変更するのはどのようにするのでしょうか？
「id="f-option"」のものだけを指定して色を変更にする方法を知りたく思います。

通常だと[#id名]なので

#f-option input[type=radio]:checked ~ .check {
  border: 5px solid blue;
}

#f-option input[type=radio]:checked ~ .check::before{
  background: blue;
}

#f-option input[type=radio]:checked ~ label{
  color: blue;
}

としたら何も色が表示されないでいます。

ご教授宜しくお願いします。

Answer 1

classの場合は.クラス名
idの場合は#ID名

Comments

[kumakumatan]

ご回答ありがとうございます。
私も
#f-option input[type=radio]:checked ~ .check {
border: 5px solid blue;
}

#f-option input[type=radio]:checked ~ .check::before{
background: blue;
}

#f-option input[type=radio]:checked ~ label{
color: blue;
}
としてみたのですが、何も有効にならない状態です。
そこで聞いてみました。
宜しくお願いします。

[m.ts10806]

半角スペースをあけると「それの配下の（または子の）」という意味となります。
くっつけると良いのですが、inputなどのタグのほうがレベルとしては上なので
例えば
input[type=radio]#f-option
とかですね。
ただIDは「画面内に唯一であるというのが保障されているもの」という前提があるので実はタグやtypeなどの指定は省略可能で、下記のようにも書けます。
#f-option:checked

[kumakumatan]

ありがとうございます。
できました！
今後とも宜しくお願いします。

[m.ts10806]

解決されたようで何よりです