Use a select option to style a different element

A question for the pros among you: many of you use the neat trick to implement tab pages by using radio buttons checked pseudo class to style child elements like: input[value="1"]:checked ~ div.myclass .... This only seems to work with immediate descendents though. is a similar thing possible with select option values? I would like to display background-images on the sheet dependent on a player selection. this would be easy with js but I struggle to do it with css (a internet search indicates this might be impossible) Any ideas?

The trick, at least with roll20, is hidden fields. Example: <input type="hidden" name="attr_rogue_toggle" class="rogue-class-features"> <div class="rogue-class-features-toggle"> I now have some css to hide the adjacent div: .sheet-rogue-class-features:not([value='1']) {   & ~ .sheet-rogue-class-features-toggle {     display: none;   } } I could have a select named "attr_rogue_toggle". When that select change, the hidden field will change. You can then use the css above with text or numbers to change fields that appear later. You can also trigger fields below that as well: .sheet-rogue-class-features:not([value='1']) {   & ~ .sheet-rogue-class-features-toggle {     .sheet-FIELD { display: none; }   } } Or plenty of other CSS options as well. In case you didn't know + is the adjacent sibling while tilde (~) is for any sibling

I've never "nested" the css like that.  That's cool.  (off to follow a tutorial) Thanks Kryx

Ah, that's sass (scss). Sorry, I forgot to parse it to css to share. I compile it to css during my build.

Vince said: I've never "nested" the css like that.  That's cool.  (off to follow a tutorial) Thanks Kryx Cascading Style Sheets can't actually be nested. Kryx is using Syntactically Awesome Style Sheets, which is actually a scripting language that gets compiled into CSS output. As far as using <select> goes, you can abuse the fact that Roll20 will propagate the value selected to all other inputs with the same name. So, select on option with value=1, let Roll20 set a hidden checkbox/radio with the same name and value=1 to :checked, and go from there.

Thanks guys! You are the best. The value propagation did the trick (even if it feels a bit.... messy....) . I feel I have to take a look at sass sooner or later - it seems really convenient as soon as you get the hang of it. On a (un-)related note: do you know how long it usually takes until a pull request to master is approved?

Typically pulled by roll20 on Monday or Tuesday US time.