<p data-piece1="Swordsmen" data-piece2="aRcHeRs"></p>
<p data-piece1="Swordsmen" data-piece2="Archers"></p>
<p data-piece1="Swordsmen" data-piece2="archers"></p>
<p data-piece1="Pikemen" data-piece2="Swordsmen"></p>
<p data-piece1="Cavalry" data-piece2="Pikemen"></p>
<p data-piece1="Archers" data-piece2="Cavalry"></p>
<p data-piece1="Pikemen" data-piece2="Archers"></p>
<p data-piece1="Swordsmen" data-piece2="Cavalry"></p>
[data-piece1][data-piece2]::before {
  content: attr(data-piece1) ' vs ' attr(data-piece2) ': ';
}

[data-piece1][data-piece2]::after {
  content: attr(data-piece1) ' wins!';
}

[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!'
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.