Code for hidden sections not working

I've been updating a legacy 5e sheet to add some 3rd party content. Some hidden sections aren't working as I hoped they would. Some sections hide when they should, others hide when they shouldn't, and some don't hide when they should. The idea is that the display sections for Caster Level, Pact Level & Manifester Level should only display if the character actually has a level greater than zero in the respective category. If anyone can offer any suggestions I'd be grateful. The CSS I am currently using is: .toggle [ value = "0" ] ~ .arcanum-level , .toggle [ value = "0" ] ~ .spell-level {   display : none !important ; } .toggle:not ([ value = "0" ]) ~ .arcanum-level , .toggle:not ([ value = "0" ]) ~ .spell-level {   display : inline-block !important ; } And the HTML is: < input type = "hidden" class = "toggle" name = "attr_caster_level" > < div class = "arcanum-level" >   < div class = "level" >< span class = "label" name = "attr_caster_level" style = " font-weight: bold;" > 0 </ span ></ div >   < div class = "cantrips" >< span class = "label" style = " font-size: 13px; font-weight: bold; margin-left: 10px;" data-i18n = "magic-caster-lvl:-u" > MAGIC CASTER LEVEL </ span ></ div > </ div > < input type = "hidden" class = "toggle" name = "attr_pact_level" > < div class = "arcanum-level" >   < div class = "level" >< span class = "label" name = "attr_pact_level" style = " font-weight: bold;" ></ span ></ div >   < div class = "cantrips" >< span class = "label" style = " font-size: 13px; font-weight: bold; margin-left: 10px;" data-i18n = "pact-caster-lvl:-u" > PACT CASTER LEVEL </ span ></ div > </ div > < input type = "hidden" class = "toggle" name = "attr_manifest_level" > < div class = "arcanum-level" >   < div class = "level" >< span class = "label" name = "attr_manifest_level" style = " font-weight: bold;" > 0 </ span ></ div >   < div class = "cantrips" >< span class = "label" style = " font-size: 13px; font-weight: bold; margin-left: 10px;" data-i18n = "manifester-lvl:-u" > MANIFESTATION LEVEL </ span ></ div > </ div >

I see three issues. Not directly causing your problem, but making your code more convoluted than needed. Set the display mode for  .arcanum-level and .spell-level when they are shown first without the selectors. Then modify it to display none when the toggle is zero. This creates simpler code. Actually causing your problem. You are using the sibling selector ( ~ ) in your css. This looks at all subsequent elements at the same level in the html that come after the element. You want the adjacent selector ( + ). Causing a second issue. The hidden versions of the levels need to have a default value specified that is the same as the shown input version of these. Also, note that for this to work, you need to have the css look for empty string value and no value property  With both of those, your css will look like: .arcanum-level, .spell-level {   display: inline-block; } .toggle:is([value="0"], [value=""], :not([value])) + .arcanum-level, .toggle:is([value="0"], [value=""], :not([value])) + .spell-level {   display: none; }

Thank you, it is now all working as it should.