Why is ~ not working in case of .icon class ?

Question

input[type="checkbox"]:checked ~ i{
color:#9f9;
}
input[type="checkbox"]:checked ~ .icon{
box-shadow: inset 2px 2px 3px grey ;
}
It the above code , the '~' is working perfectly in case of i tag but not working in class = "icon" ??
Why ?

Answer 1

Can you write full code on Sololearn Playground and share here. Maybe you did something mistake.

Answer 2

ＡＢＨＩＳＨＥＫ I found that ~ works on next tag or class or id. But your class is before the checkbox That's Why it's not working.
Check this code edited by me Just check the last icons and click on that.
https://code.sololearn.com/WqGn9jJSbylr/?ref=app

Answer 3

🅰🅹 - Sʀ. Sᴏғᴛᴡᴀʀᴇ Eɴɢɪɴᴇᴇʀ
Wow
Thanks a lot❤️😊

Answer 4

🅰🅹 - Sʀ. Sᴏғᴛᴡᴀʀᴇ Eɴɢɪɴᴇᴇʀ
Here it is
https://code.sololearn.com/WymAJiwNYugo/?ref=app