Roll20 uses cookies to improve your experience on our site. Cookies enable you to enjoy certain features, social sharing functionality, and tailor message and display ads to your interests on our site and others. They also help us understand how our site is being used. By continuing to use our site, you consent to our use of cookies. Update your cookie preferences .
×
Create a free account

[CSS] Swap Visible Area in sheet

Hello Roll20 Community, I had used the exemple of "Swap Visible Area" in CSS Wizardry, and succeed to make it work ! But I have a problem.  For be true, I don't really understand what is happening in the CSS, I know that "~" is for selecting what is under. B ut I don't understand the syntaxe before and the interaction of the " , " . I want to put my input at the extreme bottom of my sheet then It's can't be Above the dive . Then I should edit the CSS for this purpose.  Here the exemple that is not working, but the one I want to reach:  And now the CSS:  I Understand that it's not working because of "~", but don't know how to change the css for make it working if the input is "Under" the div. And if someone have an explanation of what does the css here, I would be really glade, especially the part:  .sheet-BOTsideA , The "," interraction with the line just under make me confuse. 
1600340473
Andreas J.
Forum Champion
Sheet Author
Translator
The "," is used to list several things that should use the same code. .sheet - block - a, .sheet - block - switch :checked ~ .sheet - block - b { display: block; } is the shorter way to write: .sheet - block - a{ display: block; } .sheet - block - switch :checked ~ .sheet - block - b { display: block; } For the ~ ( General sibling combinator ), there there isn't really a clean way to do the reverse. I suggest you add a duplicate of the checkbox in it's proper place and then make it invisible in some way. I really suggest you start learning the basics of CSS, as knowing what the  "," is used for is like among the first things to learn and remember. If you're unaware of this, you are likely lacking something else in the fundamentals, making it very hard to understand existing code, or even simple examples.
Thank you for your answer, The invisible checkbox solution work. ! °v°)&nbsp; I learned CSS in school but they never explained me thing like :&nbsp; <a href="https://www.w3schools.com/cssref/css_selectors.asp" rel="nofollow">https://www.w3schools.com/cssref/css_selectors.asp</a> That I had just found today, I will try to deep a little more into that for get better understanding then. And thank you for your explanation !&nbsp;