Posted by mpweiher 9/7/2025
The `:checked` selector allows you to target checkboxes that are checked. So you can have a set of checkboxes (off screen with an absolute negative position or similar) that are controlled via a <label> element that wraps the + or - text in the tree. Then based on its state, you can target elements directly afterward to be expanded or contracted using the CSS adjacent sibling combinator.
Checkboxes are neat because they provide state management natively in the DOM and you can do a lot via CSS based on that ;) Thus, you have pure HTML and CSS collapsible trees.
npm install @picocss/pico
Strangely latest bootstrap works just fine.
Not specifically picking on this one, just that it seems that they are the quick to crank out type of libraries and everyone has their own.
The last was when the company I worked for was acquired. We needed to adopt their CSS library for all our applications.
I changed their component based library to have semantic style css and dropped it right in.
To create an absurdist analogy it is like saying that because labels on cotton T-shirts are the same size that you could take them off shirt A and sew them onto shirt B. It is possible by there is zero point in doing it other than to say that you did it.
Semantic:
p
Normal:
p class=paragraph
Utility:
p class=mx-1 py-1 my-2 text-medium
It is like buying a medium shirt rather than getting a tailor-made t-shirt.