So my sheet design is almost done, there's just one nit-pick that's bothering me very much. At this point it's not even about fixing the sheet. I have my default style picked out, but code that works for other elements isn't working for changing the sheet style. How is it that this works: <html lang="en"> <div> <div class="sheet-body"> <div class="grid-container"> <div class="1"> <button class="sheet-blank-button" type="action" name="act_charbio"> <h4>Char Bio</h4> </button> </div> </div> </div> </div> <div> <input type="hidden" name="attr_charbio" class="sheet-toggle-show" value="0" /> <div class="sheet-body"> <div class="sheet-3colrow"> <h2>Character Bio</h2> </div> <div class="grid-3"> <div class="1"> <span> <h4>Strengths</h4> </span> <textarea type="textarea" name="attr_biostr" class="inputarea"></textarea> </div> </div> </div> </div> </div> <script type="text/worker"> on("clicked:charbio",function() { getAttrs(["charbio"], function(values) { let charbio = +values.charbio || 0; let result = 0; if (charbio == 0) {result = 1;} else {result = 0;} setAttrs({ charbio: result}); }); }); </script> .sheet-toggle-show[value="1"] ~ div.sheet-body { display: none; background-color: none; background-image: none; } But this doesnt: <input type="number" class="sheet-colourall" name="attr_colourall" value="1"/> <div class="grid-container"> <div class="1"> <button class="sheet-blank-button" type="action" name="act_colour1"> <h4> Default </h4> </button> </div> </div> <script type="text/worker"> on("clicked:colour1", function() { getattrs(["colourall"], function(values) { let colourall = +values.colourall || 0; let result = 0; if (colourall == 0) {result = 0;} else {result = 1;} setAttrs({ colourall: result}); }); }); </script> .sheet-colourall[value="1"] ~ div.sheet-blank-button { background: #00b300; color: #FFFFFF; } I've fully given up on all attempts at keeping the project subtle. Click here to see the whole thing (It's on one text file for your convenience).