html – CSS does not apply (dynamically) with sibling or adjacent sibling selector

Hello guys, I have a css rule that works while loading the page, but my component is dynamic (depends on the attribute checked from a "radio") to apply the style.
Basically, when I click on a new "star", its color should change according to the "brother" of the latter if the input radio is selected. but this css rule only works when I reload the page. (The value has already been updated from the database). Follow the css:

.annotation> .actions> .stars-box a.star1> entry[type=radio][checked].hide + i.fa.fa-star {color: var (- bk-star1)! important; font size: 18px! important;}
.annotation> .actions> .stars-box a.star2> entry[type=radio][checked].hide + i.fa.fa-star {color: var (- bk-star2)! important; font size: 18px! important;}
.annotation> .actions> .stars-box a.star3> entry[type=radio][checked].hide + i.fa.fa-star {color: var (- bk-star3)! important; font size: 18px! important;}

I am putting together a super specific selector to see if it forces you more as you can see.
Now the HTML structure