Hiding Element based on Class using CSS

I'm currently writing a custom character sheet for the home brew game me and my friends are playing.

The charactes in the system are split in two main classes (mage and fighter) that use different resources for combat. i want to make it so, that only the fields for the chosen class are shown. as far as i understood it you can use css to hide elements based on the state of other inputs. 

the whole thing currently looks like this:

<select name="attr_characterclass" class="sheet-characterclass">
    <option name="attr_characterclass" value="fighter"Fighter</option>
    <option name="attr_characterclass" value="mage">Mage</option>
    <option name="attr_characterclass" value="other">Other</option>
</select>

<div class="sheet-ui_fighter">
    ... class specific elements
</div>

Check out the roll20 wiki, the css wizardry page.

But you need to add an input, type=hidden, to match your select and give it a class. Something like:

<select name="attr_characterclass" class="sheet-characterclass">
    <option name="attr_characterclass" value="fighter"Fighter</option>
    <option name="attr_characterclass" value="mage">Mage</option>
    <option name="attr_characterclass" value="other">Other</option>
</select>
<input type="hidden" name="attr_characterclass" class="sheet-class-selector">

<div class="sheet-ui_fighter">
    ... class specific elements
</div>

<div class="sheet-ui_mage">
    ... class specific elements
</div>

<div class="sheet-ui_other">
    ... class specific elements
</div>

The input has the same name as the select, but their classes dont need to be the same. Since this input is hidden, the class has nothing to do with layout: it's purely an identifier so it can be accessed in CSS.

Then in your CSS, you'd have something like

input.sheet-ui_fighter,
input.sheet-ui_mage,
input.sheet-ui_other {
    display: none;
}
input.sheet-class-selector[value="fighter"] ~ div.sheet-ui_fighter,
input.sheet-class-selector[value="mage"] ~ div.sheet-ui_mage,
input.sheet-class-selector[value="other"] ~ div.sheet-ui_other {
    display: inline-block;
}

In the html, the inputs should be on the same level as the divs, a flow like the above should work. But depending on sheet layout, you sometimes have to tweak the css, or move your hidden inputs to a more suitable location.

Thanks a lot for your help, I was getting really frustrated with this!

GiGs said:

In the html, the inputs should be on the same level as the divs, a flow like the above should work. But depending on sheet layout, you sometimes have to tweak the css, or move your hidden inputs to a more suitable location.

This was my problem. The hidden <input> field was in a different <tr> element. I added a copy of it right next to any <div> i want to hide and it seems to work. It's probably not the most elegant solution but it does the trick.