Conditional formatting with vanilla CSS?
Can anyone point me to a function or property that will help me conditionally render styling based on how many elements a user elects to display on the page? I've been combing MDN and Youtube, but I haven't found anything satisfying.
I am doing a side project with a friend that displays turn-timers for card or board games. The user selects the number of players and then navigates to a page with that many timers (one for each player). I am looking for a solution beyond implementing a single flexbox/grid implementation. I wish I could find the CSS equivalent to the switch statement in JavaScript 😭
I'd like to independently style what a 5 person gameboard+timers looks like, vs a 2 person or a 10 person. I feel that displays would look better in a round shape, some better as four squares in larger square, some better with space in the middle and the elements along the outside of a centered, empty shape. Maybe I'm asking too much of the language? If my descriptions are too confusing, let me know and I will draw out some diagrams. Thank you in advance 🙏
I'd like to independently style what a 5 person gameboard+timers looks like, vs a 2 person or a 10 person. I feel that displays would look better in a round shape, some better as four squares in larger square, some better with space in the middle and the elements along the outside of a centered, empty shape. Maybe I'm asking too much of the language? If my descriptions are too confusing, let me know and I will draw out some diagrams. Thank you in advance 🙏
3 Replies
If you don't mind the broswer support not being perfect,
:has() can do itThis is a fantastic article that I think has some examples you could build off of for what you're looking to do
https://ishadeed.com/article/conditional-css-has-nth-last-child/
Ahmad Shadeed Blog
Conditional CSS with :has and :nth-last-child - Ahmad Shadeed
A modern look at how to combine CSS :has, :nth-last-child, and style queries to create dynamic components.
Thank you for this resource! This looks really doable! I saw too the explanation for :has() on bibamann's modulo issue w/flex/grid columns and thought that looked like a great solution
I'll report back if I get a fun result 👍