I'm a little lost in hiding elements from a repeating section, i tried to follow the CSS Wizardry but dind't work. How can I do in the best way possible? My HTML
<div class='sheet-config'>
<div class="2colrow">
<div class="col">
<fieldset class="repeating_jutsus">
<label>Nome</label><input type="text" name='attr_njutsu'><br />
<label>Custo</label><input type="number" name='attr_custo'><br />
<label>Dano</label><input type="number" name='attr_dano'><br />
<label>Alcance</label><input type="text" name='attr_alcance'><br />
<label>Alvo/Área</label><input type="text" name='attr_alvo'><br />
<label>Duração</label><input type="text" name='attr_duracao'><br />
<label>Descrição</label><textarea style="resize:none" name='attr_desc_jutsu'></textarea>
<button type='roll' name='roll_AtaqueD' value='&{template:default} {{name=@{njutsu}}}{{@{desc_jutsu}}}'></button>
<br />
<hr>
</fieldset>
</div>
</div> CSS .charsheet {
background-color: #ddd;
min-width: 800px;
}
.charsheet label {
display: inline-block;
width: 75px;
text-align: right;
}
.charsheet input {
display: inline-block;
width: 165px;
}
.charsheet input.sheet-short {
width: 3.5em;
}
.charsheet table td, .charsheet table th {
font-size: 1.2em;
font-weight: bold;
text-align: center;
}
select.sheet-dtype {
width: 60px;
vertical-align: top;
}
textarea {
resize: vertical;
overflow: auto;
}
/*
div {
display: flex;
}
*/
.sheet-personagem,
.sheet-config,
.sheet-pericias {
display: none;
}
/* show the selected tab */
.sheet-tabstoggle[value="personagem"] ~ div.sheet-personagem,
.sheet-tabstoggle[value="configuration"] ~ div.sheet-config,
.sheet-tabstoggle[value="pericias"] ~ div.sheet-pericias {
display: block;
}
div.sheet-vantagens .repcontainer label{
width: 45px;
}
h4{
display:inline;
}
hr{
border-top: 1px solid black;
}
I just want to put the Name ('Nome') and a checkbox in the right to hide the rest of the fields.
