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="archers"i][data-piece1="swordsmen"i]::after,[data-piece2="swordsmen"i][data-piece1="pikemen"i]::after,[data-piece2="pikemen"i][data-piece1="cavalry"i]::after,[data-piece2="cavalry"i][data-piece1="archers"i]::after{content:attr(data-piece2)' wins!'}
CSS
Add the attributes
data-piece1anddata-piece2to any element, and it will announce the winner:In CSS Selectors Level 4, there is an option to make some selectors case-insensitive (adding an
iat 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.Okay close it all, we have a winner!
This is by far the most clever CSS I have ever seen. I applaud you.
Mad