Styling Action Buttons: Changing Style when Active

I'm attempting to change a sheet which relies on radio buttons to shift between tabs. At present, depending on which tab is selected, its styling will differ from the currently inactive tabs. HTML: <input type="radio" name="attr_tab" class="sheet-tab sheet-tab1" value="1" title="Prime" checked="checked" />         <input type="radio" name="attr_tab" class="sheet-tab sheet-tab2" value="2" title="Combat" />         <input type="radio" name="attr_tab" class="sheet-tab sheet-tab3" value="3" title="Perks & Traits" />         <input type="radio" name="attr_tab" class="sheet-tab sheet-tab4" value="4" title="Inventory" />         <input type="radio" name="attr_tab" class="sheet-tab sheet-tab5" value="5" title="Vehicles" /> CSS: input.sheet-tab1:not(:checked) ~ .sheet-tab1, input.sheet-tab2:not(:checked) ~ .sheet-tab2, input.sheet-tab3:not(:checked) ~ .sheet-tab3, input.sheet-tab4:not(:checked) ~ .sheet-tab4, input.sheet-tab5:not(:checked) ~ .sheet-tab5, input.sheet-tab6:not(:checked) ~ .sheet-tab6 {     display: none; } input.sheet-tab::before {     content: attr(title);     display: inline-block;     color: #F1C11E;     background: #000000;     border: solid 1px #F1C11E;     border-top-left-radius: 4px;     border-top-right-radius: 4px;     font-size: 14px;     font-weight: bold;     text-align: center;     width: 100%;     height: 20px; } input.sheet-tab:checked::before {     color: #000000;     background: #F1C11E; } However, any attempts to mimic this, targeting the class given to my action buttons, doesn't work in the same way.  I'm certain that has everything to do with how inputs like radio and action buttons work, but for the life of me I can't find anything discussing this specific style when it comes to action buttons. (posting the lines relevant to the action buttons below for further context) HTML: <div>     <button type="action" class="sheet-tabpc" name="act_pc">PC</button>     <button type="action" class="sheet-tabpc" name="act_npc">NPC</button> </div> <input type='hidden' class='sheet-tabstoggle' name='attr_sheetTab'  value='pc'  /> <script type="text/worker">     const buttonlist = ["pc","npc"];     buttonlist.forEach(button => {         on(`clicked:${button}`, function() {             setAttrs({                 sheetTab: button             });         });     }); </script> CSS: .sheet-pc, .sheet-npc {     display: none; } .sheet-tabstoggle[value="pc"] ~ div.sheet-pc, .sheet-tabstoggle[value="npc"] ~ .sheet-npc {     display: block; } .sheet-tabpc {     width: calc(20% - 5px);     height: 20px;     outline: none !important;     position: relative;     cursor: pointer;     z-index: 1; } .sheet-tabpc::before {     display: inline-block;     color: #F1C11E;     background: #000000;     border: solid 1px #F1C11E;     border-top-left-radius: 4px;     border-top-right-radius: 4px;     font-size: 14px;     font-weight: bold;     text-align: center;     width: 100%;     height: 20px; } .sheet-tabpc:checked::before {     color: #000000;     background: #F1C11E; } Again, complete and total novice here still trying to Frankenstein all of this, so apologies for all the fumbles and lack of knowledge! Any help is greatly appreciated.

There are a couple ways to handle this. The basic issue is that you are now keying the styling off of the value of sheetTab. So, if you want to style the buttons based on that value, the buttons need to be after the input for sheetTab. Your two options are: Just move the input for sheetTab to the very top of the html, and use descendant selectors to target the buttons Put a copy of the sheetTab input inside the div for the buttons

Thank you for responding! Apologies, I may not fully be understanding (and apologies still as I'm still unlikely to explain myself effectively in regard to code). Is it keying the styling off of the value of sheetTab due to the Sheet Worker targeting sheetTab, or was that in regard to the CSS? (as in here?) .sheet-tabstoggle[value="pc"] ~ div.sheet-pc, .sheet-tabstoggle[value="npc"] ~ .sheet-npc {     display: block; }

I ended up figuring it out! when I moved the input to the top of the html it threw everything off.  Went through a bunch of loops, wound up putting it under the overall container for the sheet, above the action buttons (which I now realize is what you were suggesting in the first place), and used descendant selectors.. It's all a learning process I suppose.. Thank you, Scott!