DEV Community


Discussion on: Daily Challenge #43 - Boardgame Fight Resolver

alvaromontoro profile image
Alvaro Montoro


Add the attributes data-piece1 and data-piece2 to any element, and it will announce the winner:

[data-piece1][data-piece2]::before {
  content: attr(data-piece1) ' vs ' attr(data-piece2) ': ';

/* By default, piece 1 will win */
[data-piece1][data-piece2]::after {
  content: attr(data-piece1) ' wins!';

/* Only in some particular cases, piece 2 will win */
[data-piece2="cavalry"i][data-piece1="archers"i]::after { 
  content: attr(data-piece2) ' wins!'

In CSS Selectors Level 4, there is an option to make some selectors case-insensitive (adding an i at the end as displayed above). And it is fairly well supported (haven't tried on IE). So it doesn't matter if the user writes "archers" or "Archers" or "aRcHeRs", all of them will be matched.

giorgiobertolotti profile image
Giorgio Bertolotti

Okay close it all, we have a winner!

somedood profile image
Basti Ortiz (Some Dood)

This is by far the most clever CSS I have ever seen. I applaud you.

reko91 profile image