Sheet CSS question: is there a better way to handle this?

Looking to see if anyone can suggest a more efficient/better method for handling this?    I want to use visability:hidden on all span's that are after radio inputs(attr_damage) greater than a given value based on the value of another attribute(attr_strength). Simplified HTML <input class="strength-value" type="hidden" name="attr_strength" value="0" /> <input class="damage" type="radio" name="attr_damage" value="0" checked /><span></span> <input class="damage" type="radio" name="attr_damage" value="1" /><span></span> <input class="damage" type="radio" name="attr_damage" value="2" /><span></span> <input class="damage" type="radio" name="attr_damage" value="3" /><span></span> <input class="damage" type="radio" name="attr_damage" value="4" /><span></span> <input class="damage" type="radio" name="attr_damage" value="5" /><span></span> <input class="damage" type="radio" name="attr_damage" value="6" /><span></span> Simplified CSS .sheet-strength[value="0"] ~ .sheet-skull[value="1"] + span::before, .sheet-strength[value="0"] ~ .sheet-skull[value="2"] + span::before, .sheet-strength[value="0"] ~ .sheet-skull[value="3"] + span::before, .sheet-strength[value="0"] ~ .sheet-skull[value="4"] + span::before, .sheet-strength[value="0"] ~ .sheet-skull[value="5"] + span::before, .sheet-strength[value="0"] ~ .sheet-skull[value="6"] + span::before, .sheet-strength[value="1"] ~ .sheet-skull[value="2"] + span::before, .sheet-strength[value="1"] ~ .sheet-skull[value="3"] + span::before, .sheet-strength[value="1"] ~ .sheet-skull[value="4"] + span::before, .sheet-strength[value="1"] ~ .sheet-skull[value="5"] + span::before, .sheet-strength[value="1"] ~ .sheet-skull[value="6"] + span::before, .sheet-strength[value="2"] ~ .sheet-skull[value="3"] + span::before, .sheet-strength[value="2"] ~ .sheet-skull[value="4"] + span::before, .sheet-strength[value="2"] ~ .sheet-skull[value="5"] + span::before, .sheet-strength[value="2"] ~ .sheet-skull[value="6"] + span::before, .sheet-strength[value="3"] ~ .sheet-skull[value="4"] + span::before, .sheet-strength[value="3"] ~ .sheet-skull[value="5"] + span::before, .sheet-strength[value="3"] ~ .sheet-skull[value="6"] + span::before, .sheet-strength[value="4"] ~ .sheet-skull[value="5"] + span::before, .sheet-strength[value="4"] ~ .sheet-skull[value="6"] + span::before, .sheet-strength[value="5"] ~ .sheet-skull[value="6"] + span::before { visibility: hidden; } The code above basically uses the value of @{strength} and compares it to every value of @{damage} and only the values that are greater than @{strength} get the visability:hidden  style.  Great, but that's quite a bit of code.  I'm doing this for multiple character attributes and even have one radio that goes from 0-48!  Using the above CSS, it ends up being over 1000 lines of CSS just to handle the 48 values...  So, can anyone see a better option for handling this?  Thanks

I'm inclined to think you could use a sheet worker to create an intermediate attribute, a product of the comparison, and use that to determine what should be hidden.  But I'm not fully following what you're doing here. Can you describe what these sections are, and how they work, to give help us visualise what this is for and help us come up with shortcuts?

On the Forbidden lands sheet I use damage skulls to indicate damage to a given attribute.  I used to show all 6 skulls (radio + spans) since attributes cannot be greater than 6.  I want to hide or dim the non significant skulls to help serve as a visual cue of the max value.  My code above does this, and isn't too bad for the four attributes up to value="6", but monster strength is used as HP is up to value="48"...  Makes for a huge amount of code.  That said, it doesn't seem to impact the performance of the sheet, but I would like to streamline the css if possible. :-) Monster's strength

For fun, here's the css that handles the 4 main attributes and monster strength. (class names are different and I'm currently using opacity instead of hidden as compared to my my simple example above) 1200+ lines <a href="https://gist.github.com/vince-roll20/ca81709d53fcbfc1ca9a4b382b18e899" rel="nofollow">https://gist.github.com/vince-roll20/ca81709d53fcbfc1ca9a4b382b18e899</a>

This is surprisingly tricky. One way would be to create a hidden input for each skull, and have a sheet worker populate its values: giving it 0 if its meant to be visible, and 1 if your hidden visibility setting is to be applied.&nbsp; Then give each skull a unique class, in addition to the sheet-class, like so for empathy class="skull empathy-0" class="skull empathy-1" class="skull empathy-2" class="skull empathy-3" etc. Then you can use one CSS comparison per skull, to check the calculated value is 0 or 1, and hide as appropriate.

Hmm add 91 hidden attributes vs 1200 lines of css.&nbsp; I wonder which would have a bigger impact on a sheet's performance?

Do yourself a favor and switch to using pug/scss. Then you can just write a loop to handle it. Try a selector like&nbsp; : nth-of-type ( 1 n+1) rather than each individual number. For Mutant Year Zero which was written based on your Forbidden lands sheet I did something like this: input[name="attr_rot_permenant"][value="0"] ~ input:nth-of-type(1n+1) + span, input[name="attr_rot_permenant"][value="1"] ~ input:nth-of-type(1n+4) + span, input[name="attr_rot_permenant"][value="2"] ~ input:nth-of-type(1n+5) + span, input[name="attr_rot_permenant"][value="3"] ~ input:nth-of-type(1n+6) + span, input[name="attr_rot_permenant"][value="4"] ~ input:nth-of-type(1n+7) + span, input[name="attr_rot_permenant"][value="5"] ~ input:nth-of-type(1n+8) + span, input[name="attr_rot_permenant"][value="6"] ~ input:nth-of-type(1n+9) + span, input[name="attr_rot_permenant"][value="7"] ~ input:nth-of-type(1n+10) + span, input[name="attr_rot_permenant"][value="8"] ~ input:nth-of-type(1n+11) + span, input[name="attr_rot_permenant"][value="9"] ~ input:nth-of-type(1n+12) + span, input[name="attr_rot_permenant"][value="10"] ~ input:nth-of-type(1n+13) + span { &nbsp; content: ""; }

I found some examples of nth of child, but couldn't wrap my head around getting it to work for this.&nbsp; I'll try again using your example. Thanks Cassie

I typically stick with nth-of-type rather than nth child. :)

nth of type,&nbsp; oops. pug/sass can only be used locally correct?&nbsp; You still need to use pure css for roll20?

Yep. It is easy enough to just write in Pug &amp; SCSS then compile the css &amp; html to the main folder. So it's not even a noticeable step. Pug in particular is well worth it. I dropped my sheet creation time from about 80 hours down to 20-40.

I love pugs. ;-)

Just reporting back... I used nth-of-type(n) which cut down the amount of code needed substantially!!&nbsp; Can't say I fully grasp how the&nbsp; formula &nbsp;is constructed (planning to study the linked tutorial when I get a sec...), but I was able to make it work with a little fiddling.&nbsp; Thanks for the help. this; input[name="attr_strength"][value="0"] ~ input.sheet-skull:nth-of-type(1n+3) + span::before, input[name="attr_strength"][value="1"] ~ input.sheet-skull:nth-of-type(1n+4) + span::before, input[name="attr_strength"][value="2"] ~ input.sheet-skull:nth-of-type(1n+5) + span::before, input[name="attr_strength"][value="3"] ~ input.sheet-skull:nth-of-type(1n+6) + span::before, input[name="attr_strength"][value="4"] ~ input.sheet-skull:nth-of-type(1n+7) + span::before, input[name="attr_strength"][value="5"] ~ input.sheet-skull:nth-of-type(1n+8) + span::before, input[name="attr_strength"][value="6"] ~ input.sheet-skull:nth-of-type(1n+9) + span::before { opacity: .25; } replaced this; .sheet-strength[value="0"] ~ .sheet-skull[value="1"] + span::before, .sheet-strength[value="0"] ~ .sheet-skull[value="2"] + span::before, .sheet-strength[value="0"] ~ .sheet-skull[value="3"] + span::before, .sheet-strength[value="0"] ~ .sheet-skull[value="4"] + span::before, .sheet-strength[value="0"] ~ .sheet-skull[value="5"] + span::before, .sheet-strength[value="0"] ~ .sheet-skull[value="6"] + span::before, .sheet-strength[value="1"] ~ .sheet-skull[value="2"] + span::before, .sheet-strength[value="1"] ~ .sheet-skull[value="3"] + span::before, .sheet-strength[value="1"] ~ .sheet-skull[value="4"] + span::before, .sheet-strength[value="1"] ~ .sheet-skull[value="5"] + span::before, .sheet-strength[value="1"] ~ .sheet-skull[value="6"] + span::before, .sheet-strength[value="2"] ~ .sheet-skull[value="3"] + span::before, .sheet-strength[value="2"] ~ .sheet-skull[value="4"] + span::before, .sheet-strength[value="2"] ~ .sheet-skull[value="5"] + span::before, .sheet-strength[value="2"] ~ .sheet-skull[value="6"] + span::before, .sheet-strength[value="3"] ~ .sheet-skull[value="4"] + span::before, .sheet-strength[value="3"] ~ .sheet-skull[value="5"] + span::before, .sheet-strength[value="3"] ~ .sheet-skull[value="6"] + span::before, .sheet-strength[value="4"] ~ .sheet-skull[value="5"] + span::before, .sheet-strength[value="4"] ~ .sheet-skull[value="6"] + span::before, .sheet-strength[value="5"] ~ .sheet-skull[value="6"] + span::before { opacity: .25; } really made a SUBSTANTIAL difference when doing the code up to value="48".