Guys, I have the following doubt: I have a list of classes and I would like, when selecting a certain class, another list of sub-classes and another list of spells appear. The class list looks like this: <div class = "sheet-main> <div class='sheet-3colrow-principal'> <div class='sheet-col'>
<span class="sheet-label sheet-label-class"><label for="class">Class:</label></span>
<select class="sheet-list sheet-list-class" name="attr_class">
<option value="" selected> </option>
<option value="1">Bard</option>
<option value="4">Mage</option>
</select>
<input type="radio" name="attr_class" class="sheet-bard sheet-hide" value="1" checked>
<input type="radio" name="attr_class" class="sheet-mage sheet-hide" value="2">
<span class="sheet-label sheet-label-esp"><label for="sub-class">Sub-class:</label></span>
<select class="sheet-list sheet-list-sub-class sheet-list-bard" name="attr_list-bard">
<option value="" selected> </option>
<option value="1">bard1</option>
<option value="2">bard2</option>
<option value="3">bard3</option>
</select>
<select class="sheet-list sheet-list-sub-class sheet-list-mage" name="attr_list-mage">
<option value="" selected> </option>
<option value="1">mage1</option>
<option value="2">mage2</option>
<option value="3">mage3</option>
</select>
</div>
In CSS I use the following commands: .sheet-hide, .sheet-list-subclass, { display: none; }
.sheet-bard:checked ~ .sheet-list-bard,
.sheet-mage:checked ~ .sheet-list-mage , { display: inline; }
This has worked I imagine because the elements (class and subclass) are siblings and are within the same div (parent). However, the list of spells is in another tab and is not sister of the class element, how should I configure css in this case? HTML from magic list: <div class="sheet-tab-content sheet-tab4">
<span class="sheet-label sheet-label-l-basic"><label for="l-basica">Basic list.................Level.....Total</label></span>
<div class="sheet-list-mage sheet-list-magic" name"attr_list-mage">
<span class="sheet-label sheet-label-mage-magic1"><label for="mage-magic1">mage-magic1:</label></span>
<input class="sheet-input sheet-input-mage-magic1" value="0" type="number" name="attr_mage-magic1"/>
<input class="sheet-input sheet-input-total-mage-magic1" type="number" disabled="true "name="attr_total-mage-magic1"/>
<button class="sheet-roll sheet-roll-mage-magic1" type='roll' value='#Habilidade' name='roll_mage-magic1'></button>
</div>
<div class="sheet-list-bard sheet-list-bard" name="attr_list-bard">
<span class="sheet-label sheet-label-magic-bard1"><label for="magic-bard1">magic-bard1:</label></span>
<input class="sheet-input sheet-input-magic-bard1" value="0" type="number" name="attr_magic-bard1"/>
<input class="sheet-input sheet-input-total-magic-bard1" type="number" disabled="true "name="attr_total-magic-bard1"/>
<button class="sheet-roll sheet-roll-magic-bard1" type='roll' value='#Habilidade' name='roll_magic-bard1'></button>
</div>
</div>
