Custom sheet Subsequent-sibling combinator falure

HTML                     < input type = "hidden" name = "attr_stress1" value = "1" class = "stressBoxInfo" />                     < button type = "action" name = "act_stress1" class = "stressBox" ></ button > CSS .stressBox {     display : flex ;     justify-content : center ;     align-items : center ;     min-width : 50px ;     min-height : 50px ;     max-width : 50px ;     max-height : 50px ;     border-width : 3% ;     border-color : black ; } input.sheet-stressBoxInfo [ value = "0" ] ~ button.sheet-stressBox {     background-color : white ; } input.sheet-stressBoxInfo [ value = "1" ] ~ button.sheet-stressBox {     background-color : yellow ; } input.sheet-stressBoxInfo [ value = "2" ] ~ button.sheet-stressBox {     background-color : red ; } I've been scratching my head at a problem  I'm trying to make it so that the color of the stress boxes change depending on the "attr_stress1" value. I've been reading forum posts on something similar and came to the conclusion that what I have written in HTML/CSS. As I am testing through it, the value of the invisible "stressBoxInfo" is correctly updated. But for some reason, the color of the button isn't changing. I have plugged in almost exact (not adding the sheet- prefix to classes) into a blank html page and the results are as expected. It seems, for some reason that the Subsequent-sibling combinator (~) is just not working. I am stumped as to how to fix the issue.

This is likely a specificity issue. Roll20 applies default styling to many elements in the VTT (button background-color is one of them along with the background shorthand property) with quite a lot of it spilling over into affecting character sheets as well. If you look at your browser inspector for those elements, you'll probably find your written css in the list of rules being applied, but with the background-color declaration crossed out; which means that another rule is superseding it. CSS processes styling rules by several rules of precedence that can be distilled down to "more selectors override fewer selectors, and the last thing with the same number of selectors takes precedence". There's more to it than that, but that is the general idea. If you want to see exactly how the specificity for a given css declaration is calculated, you can find css specificity calculators online . To fix the specificity issue  I recommend prepending ALL CSS declarations for the character sheet with  .ui-dialog .tab-content .charsheet . There are many things that this isn't needed for or that would work with fewer additional classes, but applying it to all of your css ensures that you are always working with the same specificity level for all your css and therefore won't run into an issue where you have specificity issues within your own code.

I was poking around through the element and couldn't find my CSS rule set, at all. (I can't post the screenshot, roll20 leads to 404 if I do)  I do not follow with the instructions to fix the specificity issue.