Board Thread:Support Requests - Designing Your Wiki/@comment-26862398-20180201222057/@comment-26862398-20180203011309

I figured out the problem is that the "~" symbol is a sibling combiner and when the character boxes are put inside the table, they become descendants of that sibling. I wasn't sure how to fix it though.

I had the question also posted on stackoverflow and found out that two combiners can be combined. Using "~*" does just what I want, it looks at a sibling's descendant.

.spoilerbutton:active ~ * .spoilerbox { transition: all 0s; background:#8b0000; } .spoilerbutton:active ~ * .spoilerbox * .spoilerboxname { transition: all 0s; background:#8b0000; }