[CSS] Doubt in creating charsheet

[PT-BR] Estava verificando que há algumas fichas que utilizam um Input type=checkbox que, quando clicados, permitem mudar o CSS de campos em lugares diferentes da ficha (ex.: CoC 7ed). Tentei reproduzir a mesma situação, mas não obtive resultados. Há um jeito específico para isso acontecer? Hoje estou utilizando [:checked ~ *] ou [:checked + *] para determinar se o próximo elemento estará ou não com CSS alterado, só que isso só funciona se o elemento está no mesmo nível ou logo em sequência. Mas eu gostaria fazer algo do tipo <div> <input type="checkbox" value="on" name="attr_mostrar_janela" class="mostrar-janela"> </div> <!-- === --> <div> <div class="janela"> Conteúdo Oculto </div> </div> css .janela{     display: none } input [type=checkbox][name=attr_mostrar_janela][value=on] ~ *.janela { display: block } ou seja, queria criar cada campo ou janela em um nível diferente, mas que os input pudessem comunicar entre si. [translate] I was checking that there are some charsheets that use an Input type = checkbox that, when clicked, allow changing the CSS of fields in different places on the card (ex: CoC 7ed). I tried to reproduce the same situation, but got no results. Is there a specific way for this to happen? I am using [: checked ~ *] or [: checked + *] to determine whether or not the next element will have altered CSS, but this only works if the element is at the same level or right in sequence. But I would like to do something like <div> <input type="checkbox" value="on" name="attr_mostrar_janela" class="mostrar-janela"> </div> <!-- === --> <div> <div class="janela"> Conteúdo Oculto </div> </div> css: .janela{     display: none } input [type=checkbox][name=attr_mostrar_janela][value=on] ~ *.janela { display: block } that is, I wanted to create each field or window at a different level, but that the inputs could communicate with each other.

Two things to remember: The VTT will prefix all your CSS classes with "sheet-". CSS selectors can only target children and siblings (those elements adjacent or nested within them). So you have to put a copy of the input adjacent to the element you want to reveal.  CSS: . sheet- janela{     display: none } input [type=checkbox][name=attr_mostrar_janela][value=on] ~ . sheet- janela { display: block } HTML <div> <input type="checkbox" value="on" name="attr_mostrar_janela" class="mostrar-janela"> </div> <!-- === --> <div> <input type="hidden" name="attr_mostrar_janela"> <div class="janela"> Conteúdo Oculto </div> </div>

In this form (CoC7), for example, do all fields that show or hide have an hidden input that previously yields?

In the instance of CoC7e by Roll20, they are all controlled by a single hidden input at the very start of the sheet which is then selected by a very broad child selector. I.e. <input type="hidden" name="attr_editmode"> ... <div class="sheet-header"> <div class="sheet-character-info"> ... <div class="sheet-attribute-display-wrapper sheet-edit-hide"></div> Which then has the CSS: .sheet-edit-hide { display: none; } input[type=hidden][name*=editmode][value=on] ~ * .sheet-edit-hide { display: block; } The `~ *` selector will find any siblings of the original element. Separating two elements with whitespace (i.e. `* .sheet-edit-hide`) will find children of the first selector. You can break this down by looking at it this way: Find an input where the type=hidden , and a name*=editmode . Look at every sibling (~ *) of this input, and select any children with the class sheet-edit-hide .  It's worth noting that this only works if you want all items to be hidden or displayed with a single toggle. If you want each element to be individually controlled, you either need to have individual toggles, or use action buttons and a single controller like the Pathfinder 2 by Roll20 sheet does.

Got it, thanks for the explanation. I was really looking for a way to make one field change another "at a distance", but I never came up with the idea of creating a copy of the element with hidden. This will make it easier for me to "block" the parts of my charsheet. I was breaking my head here to assemble the plug with PC / NPC xD

instead of creating something like: <input radio> <div> <header> <div>PC</div> </header> </div> <input radio> <div> <header> <div>NPC</div> </header> </div> I want something like, so I'm going to create my charsheet using your explanation, right? <input check aaa> <div> <input check aaa hidden> <header> <div> PC </div> <div> NPC </div> </header> </div>