A list of some neat CSS tricks.
Bulma.io
Another CSS Framework to check out, it’s like Bootstrap but on flexbox.
Styling elements based on sibling count
Suppose you’d want to apply a different css rule depending on the number of siblings an element has, I.E. you want a column to have a 50% width if there’s two of it, 33.3% if there’s three and so on, without using any JS.
This code does the trick.
element:first-child:nth-last-child(1) { (insert col-1 css here) } element:first-child:nth-last-child(2), element:first-child:nth-last-child(2) ~ element { (insert col-2 css here) } element:first-child:nth-last-child(3), element:first-child:nth-last-child(3) ~ element { (insert col-3 css here) } //and so on...
Here’s a working CodePen.
Credits to Lea Verou and André Luís.