Ich versuche gerade ein tic tac toe spiel zu schreiben, was nur mit CSS läuft kein Javascript. Ist das möglich? Ich versuche spiele, ohne Javascript zu schreiben für meine Schwester. Der Harken ist, es darf kein Javascript dabei sein, nur CSS und HTML. Ist das überhaupt möglich? Kennt ihr Spiele, die ohne das laufen? Wäre über jede Hilfe dankbar.
Code
<style>
/* ================================================================
This copyright notice must be untouched at all times.
The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menu/cssplay-tic-tac-toe-v4.html
Copyright (c) Stu Nicholls. All rights reserved.
This stylesheet and the associated html may be modified in any
way to fit your requirements.
=================================================================== */
#gr {width:300px; height:300px; position:relative; margin:40px auto; z-index:10;}
#button1 {display:block; width:200px; background:#585; font:normal 18px/26px 'texgyreadventorregular', arial, sans-serif; color:#fff; border:0; padding:10px; border-radius:4px; margin:0 auto; margin-top:100px; cursor:pointer;}
#gr:before {content:""; display:block; width:96px; height:300px; border:4px solid #777; border-width:0 4px; position:absolute; left:98px; top:0; z-index:-1;}
#gr:after {content:""; display:block; width:300px; height:96px; border:4px solid #777; border-width:4px 0; position:absolute; left:0; top:98px; z-index:-1;}
#gr div {position:absolute; left:0; top:0; width:300px; height:300px; z-index:5;}
#gr p {padding:280px 0 0 0 !important; margin:0; font: 50px/100px 'texgyreadventorregular', arial, sans-serif !important; color:#c00 !important; width:300px; text-align:center; position:absolute; left:0; top:0; z-index:-1; opacity:0; transition:0.5s 1s;}
#gr input {display:none; position:absolute; left:-9999px;}
#gr label {display:block; width:100px; height:100px; cursor:pointer; float:left;}
#gr span {width:100px; height:100px; position:absolute; z-index:-1; opacity:0; font:70px/100px 'texgyreadventorregular', arial, sans-serif; color:#000; text-align:center; transition:0.5s;}
#gr span[id*="x"] {transition:0.5s 0.5s;}
#gr span[id*="d"] {transition:0.5s 0.5s;}
#gr span[id*="1"] {left:0; top:0;}
#gr span[id*="2"] {left:100px; top:0;}
#gr span[id*="3"] {left:200px; top:0;}
#gr span[id*="4"] {left:0; top:100px;}
#gr span[id*="5"] {left:100px; top:100px;}
#gr span[id*="6"] {left:200px; top:100px;}
#gr span[id*="7"] {left:0; top:200px;}
#gr span[id*="8"] {left:100px; top:200px;}
#gr span[id*="9"] {left:200px; top:200px;}
#gr *[id*="o"] {color:#c60;}
#gr *[id*="x"] {color:#06a;}
#gr *[id*="d"] {color:#06a;}
#gr *[id*="dd"] {color:#000;}
#gr #pb,
#gr #pc,
#gr #pd,
#gr #pe {left:-9999px;}
#gr #pa {z-index:10;}
#gr input[id*="a"]:checked ~ #pa {left:-9999px;}
#gr input[id*="a"]:checked ~ #pb {left:0; z-index:10;}
#gr input[id*="b"]:checked ~ #pb {left:-9999px;}
#gr input[id*="b"]:checked ~ #pc {left:0; z-index:10;}
#gr input[id*="c"]:checked ~ #pc {left:-9999px;}
#gr input[id*="c"]:checked ~ #pd {left:0; z-index:10;}
#gr input[id*="d"]:checked ~ #pd {left:-9999px;}
#gr input[id*="d"]:checked ~ #pe {left:0; z-index:10;}
#gr input[id*="e"]:checked ~ #pe {left:-9999px;}
#gr input[id*="1"]:checked ~ #o1,
#gr input[id*="2"]:checked ~ #o2,
#gr input[id*="3"]:checked ~ #o3,
#gr input[id*="4"]:checked ~ #o4,
#gr input[id*="5"]:checked ~ #o5,
#gr input[id*="6"]:checked ~ #o6,
#gr input[id*="7"]:checked ~ #o7,
#gr input[id*="8"]:checked ~ #o8,
#gr input[id*="9"]:checked ~ #o9,
#gr input[id*="a"]:not([id*="a5"]):checked ~ #x5,
#gr #a5:checked ~ #x1,
#gr :is(#a1,#a2):checked ~ :is(#b1,#b2):checked ~ #x3,
#gr :is(#a1,#a2):checked ~ :is(#b1,#b2):checked ~ input[id*="c"]:not([id*="c7"]):checked ~ *[id*="x7"],
#gr :is(#a1,#a2):checked ~ :is(#b1,#b2):checked ~ #c7:checked ~ #x4,
#gr :is(#a1,#a2):checked ~ :is(#b1,#b2):checked ~ #c7:checked ~ input[id*="d"]:not([id*="d6"]):checked ~ *[id*="x6"],
#gr :is(#a1,#a2):checked ~ :is(#b1,#b2):checked ~ #c7:checked ~ #d6:checked ~ *[id*="d8"],
#gr :is(#a1,#a3):checked ~ :is(#b1,#b3):checked ~ #x2,
#gr :is(#a1,#a3):checked ~ :is(#b1,#b3):checked ~ input[id*="c"]:not([id*="c8"]):checked ~ *[id*="x8"],
#gr :is(#a1,#a3):checked ~ :is(#b1,#b3):checked ~ #c8:checked ~ #x4,
#gr :is(#a1,#a3):checked ~ :is(#b1,#b3):checked ~ #c8:checked ~ input[id*="d"]:not([id*="d6"]):checked ~ *[id*="x6"],
#gr :is(#a1,#a3):checked ~ :is(#b1,#b3):checked ~ #c8:checked ~ #d6:checked ~ *[id*="d9"],
#gr :is(#a1,#a4):checked ~ :is(#b1,#b4):checked ~ #x7,
#gr :is(#a1,#a4):checked ~ :is(#b1,#b4):checked ~ input[id*="c"]:not([id*="c3"]):checked ~ *[id*="x3"],
#gr :is(#a1,#a4):checked ~ :is(#b1,#b4):checked ~ #c3:checked ~ #x2,
#gr :is(#a1,#a4):checked ~ :is(#b1,#b4):checked ~ #c3:checked ~ input[id*="d"]:not([id*="d8"]):checked ~ *[id*="x8"],
#gr :is(#a1,#a4):checked ~ :is(#b1,#b4):checked ~ #c3:checked ~ #d8:checked ~ *[id*="d6"],
#gr :is(#a1,#a6):checked ~ :is(#b1,#b6):checked ~ #x2,
#gr :is(#a1,#a6):checked ~ :is(#b1,#b6):checked ~ input[id*="c"]:not([id*="c8"]):checked ~ *[id*="x8"],
#gr :is(#a1,#a6):checked ~ :is(#b1,#b6):checked ~ #c8:checked ~ #x3,
#gr :is(#a1,#a6):checked ~ :is(#b1,#b6):checked ~ #c8:checked ~ input[id*="d"]:not([id*="d7"]):checked ~ *[id*="x7"],
#gr :is(#a1,#a6):checked ~ :is(#b1,#b6):checked ~ #c8:checked ~ #d7:checked ~ #x4,
#gr :is(#a1,#a6):checked ~ :is(#b1,#b6):checked ~ #c8:checked ~ #d7:checked ~ #e9:checked ~ #wo9,
#gr :is(#a1,#a7):checked ~ :is(#b1,#b7):checked ~ #x4,
#gr :is(#a1,#a7):checked ~ :is(#b1,#b7):checked ~ input[id*="c"]:not([id*="c6"]):checked ~ *[id*="x6"],
#gr :is(#a1,#a7):checked ~ :is(#b1,#b7):checked ~ #c6:checked ~ #x2,
#gr :is(#a1,#a7):checked ~ :is(#b1,#b7):checked ~ #c6:checked ~ input[id*="d"]:not([id*="d8"]):checked ~ *[id*="x8"],
#gr :is(#a1,#a7):checked ~ :is(#b1,#b7):checked ~ #c6:checked ~ #d8:checked ~ *[id*="d9"],
#gr :is(#a1,#a8):checked ~ :is(#b1,#b8):checked ~ #x4,
#gr :is(#a1,#a8):checked ~ :is(#b1,#b8):checked ~ input[id*="c"]:not([id*="c6"]):checked ~ *[id*="x6"],
#gr :is(#a1,#a8):checked ~ :is(#b1,#b8):checked ~ #c6:checked ~ #x3,
#gr :is(#a1,#a8):checked ~ :is(#b1,#b8):checked ~ #c6:checked ~ input[id*="d"]:not([id*="d7"]):checked ~ *[id*="x7"],
#gr :is(#a1,#a8):checked ~ :is(#b1,#b8):checked ~ #c6:checked ~ #d7:checked ~ *[id*="d9"],
#gr :is(#a1,#a9):checked ~ :is(#b1,#b9):checked ~ #x2,
#gr :is(#a1,#a9):checked ~ :is(#b1,#b9):checked ~ input[id*="c"]:not([id*="c8"]):checked ~ *[id*="x8"],
#gr :is(#a1,#a9):checked ~ :is(#b1,#b9):checked ~ #c8:checked ~ #x7,
#gr :is(#a1,#a9):checked ~ :is(#b1,#b9):checked ~ #c8:checked ~ input[id*="d"]:not([id*="d3"]):checked ~ *[id*="x3"],
#gr :is(#a1,#a9):checked ~ :is(#b1,#b9):checked ~ #c8:checked ~ #d3:checked ~ *[id*="d6"],
#gr :is(#a2,#a3):checked ~ :is(#b2,#b3):checked ~ #x1,
#gr :is(#a2,#a3):checked ~ :is(#b2,#b3):checked ~ input[id*="c"]:not([id*="c9"]):checked ~ *[id*="x9"],
#gr :is(#a2,#a3):checked ~ :is(#b2,#b3):checked ~ #c9:checked ~ #x6,
#gr :is(#a2,#a3):checked ~ :is(#b2,#b3):checked ~ #c9:checked ~ input[id*="d"]:not([id*="d4"]):checked ~ *[id*="x4"],
#gr :is(#a2,#a3):checked ~ :is(#b2,#b3):checked ~ #c9:checked ~ #d4:checked ~ *[id*="d7"],
#gr :is(#a2,#a4):checked ~ :is(#b2,#b4):checked ~ #x1,
#gr :is(#a2,#a4):checked ~ :is(#b2,#b4):checked ~ input[id*="c"]:not([id*="c9"]):checked ~ *[id*="x9"],
#gr :is(#a2,#a4):checked ~ :is(#b2,#b4):checked ~ #c9:checked ~ #x3,
#gr :is(#a2,#a4):checked ~ :is(#b2,#b4):checked ~ #c9:checked ~ input[id*="d"]:not([id*="d7"]):checked ~ *[id*="x7"],
#gr :is(#a2,#a4):checked ~ :is(#b2,#b4):checked ~ #c9:checked ~ #d7:checked ~ *[id*="d8"],
#gr :is(#a2,#a6):checked ~ :is(#b2,#b6):checked ~ #x3,
#gr :is(#a2,#a6):checked ~ :is(#b2,#b6):checked ~ input[id*="c"]:not([id*="c7"]):checked ~ *[id*="x7"],
#gr :is(#a2,#a6):checked ~ :is(#b2,#b6):checked ~ #c7:checked ~ #x1,
#gr :is(#a2,#a6):checked ~ :is(#b2,#b6):checked ~ #c7:checked ~ input[id*="d"]:not([id*="d9"]):checked ~ *[id*="x9"],
#gr :is(#a2,#a6):checked ~ :is(#b2,#b6):checked ~ #c7:checked ~ #d9:checked ~ *[id*="d8"],
#gr :is(#a2,#a7):checked ~ :is(#b2,#b7):checked ~ #x4,
#gr :is(#a2,#a7):checked ~ :is(#b2,#b7):checked ~ input[id*="c"]:not([id*="c6"]):checked ~ *[id*="x6"],
#gr :is(#a2,#a7):checked ~ :is(#b2,#b7):checked ~ #c6:checked ~ #x9,
#gr :is(#a2,#a7):checked ~ :is(#b2,#b7):checked ~ #c6:checked ~ input[id*="d"]:not([id*="d1"]):checked ~ *[id*="x1"],
#gr :is(#a2,#a7):checked ~ :is(#b2,#b7):checked ~ #c6:checked ~ #d1:checked ~ *[id*="d3"],
#gr :is(#a2,#a8):checked ~ :is(#b2,#b8):checked ~ #x1,
#gr :is(#a2,#a8):checked ~ :is(#b2,#b8):checked ~ input[id*="c"]:not([id*="c9"]):checked ~ *[id*="x9"],
#gr :is(#a2,#a8):checked ~ :is(#b2,#b8):checked ~ #c9:checked ~ #x7,
#gr :is(#a2,#a8):checked ~ :is(#b2,#b8):checked ~ #c9:checked ~ input[id*="d"]:not([id*="d3"]):checked ~ *[id*="x3"],
#gr :is(#a2,#a8):checked ~ :is(#b2,#b8):checked ~ #c9:checked ~ #d3:checked ~ *[id*="x4"],
#gr :is(#a2,#a9):checked ~ :is(#b2,#b9):checked ~ #x4,
#gr :is(#a2,#a9):checked ~ :is(#b2,#b9):checked ~ input[id*="c"]:not([id*="c6"]):checked ~ *[id*="x6"],
#gr :is(#a2,#a9):checked ~ :is(#b2,#b9):checked ~ #c6:checked ~ #x3,
#gr :is(#a2,#a9):checked ~ :is(#b2,#b9):checked ~ #c6:checked ~ input[id*="d"]:not([id*="d7"]):checked ~ *[id*="x7"],
#gr :is(#a2,#a9):checked ~ :is(#b2,#b9):checked ~ #c6:checked ~ #d7:checked ~ *[id*="d8"],
#gr :is(#a3,#a4):checked ~ :is(#b3,#b4):checked ~ #x2,
#gr :is(#a3,#a4):checked ~ :is(#b3,#b4):checked ~ input[id*="c"]:not([id*="c8"]):checked ~ *[id*="x8"],
#gr :is(#a3,#a4):checked ~ :is(#b3,#b4):checked ~ #c8:checked ~ #x9,
#gr :is(#a3,#a4):checked ~ :is(#b3,#b4):checked ~ #c8:checked ~ input[id*="d"]:not([id*="d1"]):checked ~ *[id*="x1"],
#gr :is(#a3,#a4):checked ~ :is(#b3,#b4):checked ~ #c8:checked ~ #d1:checked ~ *[id*="d7"],
#gr :is(#a3,#a6):checked ~ :is(#b3,#b6):checked ~ #x9,
#gr :is(#a3,#a6):checked ~ :is(#b3,#b6):checked ~ input[id*="c"]:not([id*="c1"]):checked ~ *[id*="x1"],
#gr :is(#a3,#a6):checked ~ :is(#b3,#b6):checked ~ #c1:checked ~ #x2,
#gr :is(#a3,#a6):checked ~ :is(#b3,#b6):checked ~ #c1:checked ~ input[id*="d"]:not([id*="d8"]):checked ~ *[id*="x8"],
#gr :is(#a3,#a6):checked ~ :is(#b3,#b6):checked ~ #c1:checked ~ #d8:checked ~ *[id*="d7"],
#gr :is(#a3,#a7):checked ~ :is(#b3,#b7):checked ~ #x4,
#gr :is(#a3,#a7):checked ~ :is(#b3,#b7):checked ~ input[id*="c"]:not([id*="c6"]):checked ~ *[id*="x6"],
#gr :is(#a3,#a7):checked ~ :is(#b3,#b7):checked ~ #c6:checked ~ #x9,
#gr :is(#a3,#a7):checked ~ :is(#b3,#b7):checked ~ #c6:checked ~ input[id*="d"]:not([id*="d1"]):checked ~ *[id*="x1"],
#gr :is(#a3,#a7):checked ~ :is(#b3,#b7):checked ~ #c6:checked ~ #d1:checked ~ *[id*="d2"],
#gr :is(#a3,#a8):checked ~ :is(#b3,#b8):checked ~ #x6,
#gr :is(#a3,#a8):checked ~ :is(#b3,#b8):checked ~ input[id*="c"]:not([id*="c4"]):checked ~ *[id*="x4"],
#gr :is(#a3,#a8):checked ~ :is(#b3,#b8):checked ~ #c4:checked ~ #x1,
#gr :is(#a3,#a8):checked ~ :is(#b3,#b8):checked ~ #c4:checked ~ input[id*="d"]:not([id*="d9"]):checked ~ *[id*="x9"],
#gr :is(#a3,#a8):checked ~ :is(#b3,#b8):checked ~ #c4:checked ~ #d9:checked ~ *[id*="d7"],
#gr :is(#a3,#a9):checked ~ :is(#b3,#b9):checked ~ #x6,
#gr :is(#a3,#a9):checked ~ :is(#b3,#b9):checked ~ input[id*="c"]:not([id*="c4"]):checked ~ *[id*="x4"],
#gr :is(#a3,#a9):checked ~ :is(#b3,#b9):checked ~ #c4:checked ~ #x2,
#gr :is(#a3,#a9):checked ~ :is(#b3,#b9):checked ~ #c4:checked ~ input[id*="d"]:not([id*="d8"]):checked ~ *[id*="x8"],
#gr :is(#a3,#a9):checked ~ :is(#b3,#b9):checked ~ #c4:checked ~ #d8:checked ~ *[id*="d7"],
#gr :is(#a4,#a6):checked ~ :is(#b4,#b6):checked ~ #x1,
#gr :is(#a4,#a6):checked ~ :is(#b4,#b6):checked ~ input[id*="c"]:not([id*="c9"]):checked ~ *[id*="x9"],
#gr :is(#a4,#a6):checked ~ :is(#b4,#b6):checked ~ #c9:checked ~ #x3,
#gr :is(#a4,#a6):checked ~ :is(#b4,#b6):checked ~ #c9:checked ~ input[id*="d"]:not([id*="d2"]):checked ~ *[id*="x2"],
#gr :is(#a4,#a6):checked ~ :is(#b4,#b6):checked ~ #c9:checked ~ #d2:checked ~ *[id*="x7"],
#gr :is(#a4,#a7):checked ~ :is(#b4,#b7):checked ~ #x1,
#gr :is(#a4,#a7):checked ~ :is(#b4,#b7):checked ~ input[id*="c"]:not([id*="c9"]):checked ~ *[id*="x9"],
#gr :is(#a4,#a7):checked ~ :is(#b4,#b7):checked ~ #c9:checked ~ #x8,
#gr :is(#a4,#a7):checked ~ :is(#b4,#b7):checked ~ #c9:checked ~ input[id*="d"]:not([id*="d2"]):checked ~ *[id*="x2"],
#gr :is(#a4,#a7):checked ~ :is(#b4,#b7):checked ~ #c9:checked ~ #d2:checked ~ *[id*="d3"],
#gr :is(#a4,#a8):checked ~ :is(#b4,#b8):checked ~ #x7,
#gr :is(#a4,#a8):checked ~ :is(#b4,#b8):checked ~ input[id*="c"]:not([id*="c3"]):checked ~ *[id*="x3"],
#gr :is(#a4,#a8):checked ~ :is(#b4,#b8):checked ~ #c3:checked ~ #x1,
#gr :is(#a4,#a8):checked ~ :is(#b4,#b8):checked ~ #c3:checked ~ input[id*="d"]:not([id*="d9"]):checked ~ *[id*="x9"],
#gr :is(#a4,#a8):checked ~ :is(#b4,#b8):checked ~ #c3:checked ~ #d9:checked ~ *[id*="d6"],
#gr :is(#a4,#a9):checked ~ :is(#b4,#b9):checked ~ #x8,
#gr :is(#a4,#a9):checked ~ :is(#b4,#b9):checked ~ input[id*="c"]:not([id*="c2"]):checked ~ *[id*="x2"],
#gr :is(#a4,#a9):checked ~ :is(#b4,#b9):checked ~ #c2:checked ~ #x3,
#gr :is(#a4,#a9):checked ~ :is(#b4,#b9):checked ~ #c2:checked ~ input[id*="d"]:not([id*="d7"]):checked ~ *[id*="x7"],
#gr :is(#a4,#a9):checked ~ :is(#b4,#b9):checked ~ #c2:checked ~ #d7:checked ~ *[id*="d1"],
#gr #a5:checked ~ #b2:checked ~ #x8,
#gr #a5:checked ~ #b3:checked ~ #x7,
#gr #a5:checked ~ #b4:checked ~ #x6,
#gr #a5:checked ~ #b6:checked ~ #x4,
#gr #a5:checked ~ :is(#b7,#b9):checked ~ #x3,
#gr #a5:checked ~ #b8:checked ~ #x2,
#gr #a5:checked ~ #b2:checked ~ :is(#c3,#c9):checked ~ #x7,
#gr #a5:checked ~ :is(#b4,#b8):checked ~ #c3:checked ~ #x7,
#gr #a5:checked ~ :is(#b2,#b3):checked ~ #c4:checked ~ #x6,
#gr #a5:checked ~ #b2:checked ~ #c6:checked ~ #x4,
#gr #a5:checked ~ :is(#b2,#b4,#b6):checked ~ #c7:checked ~ #x3,
#gr #a5:checked ~ :is(#b4,#b7,#b9):checked ~ #c2:checked ~ #x8,
#gr #a5:checked ~ #b4:checked ~ :is(#c8,#c9):checked ~ #x2,
#gr #a5:checked ~ #b2:checked ~ :is(#c3,#c9):checked ~ input[id*="d"]:not([id*="d4"]):checked ~ *[id*="x4"],
#gr #a5:checked ~ #b8:checked ~ #c3:checked ~ input[id*="d"]:not([id*="d4"]):checked ~ *[id*="x4"],
#gr #a5:checked ~ :is(#b2,#b7):checked ~ :is(#c2,#c7):checked ~ input[id*="d"]:not([id*="d4"]):checked ~ *[id*="d4"],
#gr #a5:checked ~ :is(#b2,#b4):checked ~ :is(#c2,#c4):checked ~ input[id*="d"]:not([id*="d3"]):checked ~ *[id*="d3"],
#gr #a5:checked ~ #b4:checked ~ :is(#c8,#c9):checked ~ input[id*="d"]:not([id*="d3"]):checked ~ *[id*="x3"],
#gr #a5:checked ~ #b2:checked ~ #c6:checked ~ input[id*="d"]:not([id*="d7"]):checked ~ *[id*="x7"],
#gr #a5:checked ~ #b3:checked ~ #c4:checked ~ input[id*="d"]:not([id*="d8"]):checked ~ *[id*="d8"],
#gr #a5:checked ~ #b4:checked ~ #c3:checked ~ input[id*="d"]:not([id*="d2"]):checked ~ *[id*="d2"],
#gr #a5:checked ~ #b6:checked ~ #c7:checked ~ input[id*="d"]:not([id*="d2"]):checked ~ *[id*="x2"],
#gr #a5:checked ~ #b4:checked ~ #c7:checked ~ input[id*="d"]:not([id*="d9"]):checked ~ *[id*="x9"],
#gr #a5:checked ~ #b9:checked ~ #c2:checked ~ input[id*="d"]:not([id*="d6"]):checked ~ *[id*="d6"],
#gr #a5:checked ~ #b3:checked ~ input[id*="c"]:not([id*="c4"]):checked ~ *[id*="x4"],
#gr #a5:checked ~ #b6:checked ~ input[id*="c"]:not([id*="c7"]):checked ~ *[id*="x7"],
#gr #a5:checked ~ #b7:checked ~ input[id*="c"]:not([id*="c2"]):checked ~ *[id*="x2"],
#gr #a5:checked ~ #b8:checked ~ input[id*="c"]:not([id*="c3"]):checked ~ *[id*="x3"],
#gr #a5:checked ~ #b9:checked ~ input[id*="c"]:not([id*="c2"]):checked ~ *[id*="x2"],
#gr #a5:checked ~ #b2:checked ~ #c3:checked ~ #d4:checked ~ *[id*="x9"],
#gr #a5:checked ~ #b2:checked ~ #c4:checked ~ #d3:checked ~ *[id*="d7"],
#gr #a5:checked ~ #b4:checked ~ :is(#c2,#c8,#c9):checked ~ #d3:checked ~ *[id*="d7"],
#gr #a5:checked ~ #b2:checked ~ #c6:checked ~ #d7:checked ~ *[id*="d3"],
#gr #a5:checked ~ #b2:checked ~ :is(#c7,#c9):checked ~ #d4:checked ~ *[id*="d6"],
#gr #a5:checked ~ #b7:checked ~ #c2:checked ~ #d4:checked ~ *[id*="d6"],
#gr #a5:checked ~ #b8:checked ~ #c3:checked ~ #d4:checked ~ *[id*="d6"],
#gr #a5:checked ~ #b4:checked ~ #c3:checked ~ #d2:checked ~ *[id*="d8"],
#gr #a5:checked ~ #b4:checked ~ #c7:checked ~ #d9:checked ~ *[id*="d8"],
#gr #a5:checked ~ #b6:checked ~ #c7:checked ~ #d2:checked ~ *[id*="d8"],
#gr #a5:checked ~ #b9:checked ~ #c2:checked ~ #d6:checked ~ *[id*="d4"],
#gr #a5:checked ~ #b3:checked ~ #c4:checked ~ #d8:checked ~ *[id*="d2"],
#gr :is(#a6,#a7):checked ~ :is(#b6,#b7):checked ~ #x8,
#gr :is(#a6,#a7):checked ~ :is(#b6,#b7):checked ~ input[id*="c"]:not([id*="c2"]):checked ~ *[id*="x2"],
#gr :is(#a6,#a7):checked ~ :is(#b6,#b7):checked ~ #c2:checked ~ #x1,
#gr :is(#a6,#a7):checked ~ :is(#b6,#b7):checked ~ #c2:checked ~ input[id*="d"]:not([id*="d9"]):checked ~ *[id*="x9"],
#gr :is(#a6,#a7):checked ~ :is(#b6,#b7):checked ~ #c2:checked ~ #d9:checked ~ *[id*="d3"],
#gr :is(#a6,#a8):checked ~ :is(#b6,#b8):checked ~ #x9,
#gr :is(#a6,#a8):checked ~ :is(#b6,#b8):checked ~ input[id*="c"]:not([id*="c1"]):checked ~ *[id*="x1"],
#gr :is(#a6,#a8):checked ~ :is(#b6,#b8):checked ~ #c1:checked ~ #x7,
#gr :is(#a6,#a8):checked ~ :is(#b6,#b8):checked ~ #c1:checked ~ input[id*="d"]:not([id*="d3"]):checked ~ *[id*="x3"],
#gr :is(#a6,#a8):checked ~ :is(#b6,#b8):checked ~ #c1:checked ~ #d3:checked ~ *[id*="d2"],
#gr :is(#a6,#a9):checked ~ :is(#b6,#b9):checked ~ #x3,
#gr :is(#a6,#a9):checked ~ :is(#b6,#b9):checked ~ input[id*="c"]:not([id*="c7"]):checked ~ *[id*="x7"],
#gr :is(#a6,#a9):checked ~ :is(#b6,#b9):checked ~ #c7:checked ~ #x8,
#gr :is(#a6,#a9):checked ~ :is(#b6,#b9):checked ~ #c7:checked ~ input[id*="d"]:not([id*="d2"]):checked ~ *[id*="x2"],
#gr :is(#a6,#a9):checked ~ :is(#b6,#b9):checked ~ #c7:checked ~ #d2:checked ~ *[id*="d1"],
#gr :is(#a7,#a8):checked ~ :is(#b7,#b8):checked ~ #x9,
#gr :is(#a7,#a8):checked ~ :is(#b7,#b8):checked ~ input[id*="c"]:not([id*="c1"]):checked ~ *[id*="x1"],
#gr :is(#a7,#a8):checked ~ :is(#b7,#b8):checked ~ #c1:checked ~ #x4,
#gr :is(#a7,#a8):checked ~ :is(#b7,#b8):checked ~ #c1:checked ~ input[id*="d"]:not([id*="d6"]):checked ~ *[id*="x6"],
#gr :is(#a7,#a8):checked ~ :is(#b7,#b8):checked ~ #c1:checked ~ #d6:checked ~ *[id*="d2"],
#gr :is(#a7,#a9):checked ~ :is(#b7,#b9):checked ~ #x8,
#gr :is(#a7,#a9):checked ~ :is(#b7,#b9):checked ~ input[id*="c"]:not([id*="c2"]):checked ~ *[id*="x2"],
#gr :is(#a7,#a9):checked ~ :is(#b7,#b9):checked ~ #c2:checked ~ #x4,
#gr :is(#a7,#a9):checked ~ :is(#b7,#b9):checked ~ #c2:checked ~ input[id*="d"]:not([id*="d6"]):checked ~ *[id*="x6"],
#gr :is(#a7,#a9):checked ~ :is(#b7,#b9):checked ~ #c2:checked ~ #d6:checked ~ *[id*="d3"],
#gr :is(#a8,#a9):checked ~ :is(#b8,#b9):checked ~ #x7,
#gr :is(#a8,#a9):checked ~ :is(#b8,#b9):checked ~ input[id*="c"]:not([id*="c3"]):checked ~ *[id*="x3"],
#gr :is(#a8,#a9):checked ~ :is(#b8,#b9):checked ~ #c3:checked ~ #x6,
#gr :is(#a8,#a9):checked ~ :is(#b8,#b9):checked ~ #c3:checked ~ input[id*="d"]:not([id*="d4"]):checked ~ *[id*="x4"],
#gr :is(#a8,#a9):checked ~ :is(#b8,#b9):checked ~ #c3:checked ~ #d4:checked ~ *[id*="d1"] {opacity:1; z-index:100;}
</style>
<form>
<div id="gr">
<input type="checkbox" id="a1">
<input type="checkbox" id="a2">
<input type="checkbox" id="a3">
<input type="checkbox" id="a4">
<input type="checkbox" id="a5">
<input type="checkbox" id="a6">
<input type="checkbox" id="a7">
<input type="checkbox" id="a8">
<input type="checkbox" id="a9">
<input type="checkbox" id="b1">
<input type="checkbox" id="b2">
<input type="checkbox" id="b3">
<input type="checkbox" id="b4">
<input type="checkbox" id="b5">
<input type="checkbox" id="b6">
<input type="checkbox" id="b7">
<input type="checkbox" id="b8">
<input type="checkbox" id="b9">
<input type="checkbox" id="c1">
<input type="checkbox" id="c2">
<input type="checkbox" id="c3">
<input type="checkbox" id="c4">
<input type="checkbox" id="c5">
<input type="checkbox" id="c6">
<input type="checkbox" id="c7">
<input type="checkbox" id="c8">
<input type="checkbox" id="c9">
<input type="checkbox" id="d1">
<input type="checkbox" id="d2">
<input type="checkbox" id="d3">
<input type="checkbox" id="d4">
<input type="checkbox" id="d5">
<input type="checkbox" id="d6">
<input type="checkbox" id="d7">
<input type="checkbox" id="d8">
<input type="checkbox" id="d9">
<input type="checkbox" id="e1">
<input type="checkbox" id="e2">
<input type="checkbox" id="e3">
<input type="checkbox" id="e4">
<input type="checkbox" id="e5">
<input type="checkbox" id="e6">
<input type="checkbox" id="e7">
<input type="checkbox" id="e8">
<input type="checkbox" id="e9">
<div id="pa">
<label for="a1" id="aa1"></label>
<label for="a2" id="aa2"></label>
<label for="a3" id="aa3"></label>
<label for="a4" id="aa4"></label>
<label for="a5" id="aa5"></label>
<label for="a6" id="aa6"></label>
<label for="a7" id="aa7"></label>
<label for="a8" id="aa8"></label>
<label for="a9" id="aa9"></label>
</div>
<div id="pb">
<label for="b1" id="bb1"></label>
<label for="b2" id="bb2"></label>
<label for="b3" id="bb3"></label>
<label for="b4" id="bb4"></label>
<label for="b5" id="bb5"></label>
<label for="b6" id="bb6"></label>
<label for="b7" id="bb7"></label>
<label for="b8" id="bb8"></label>
<label for="b9" id="bb9"></label>
</div>
<div id="pc">
<label for="c1" id="cc1"></label>
<label for="c2" id="cc2"></label>
<label for="c3" id="cc3"></label>
<label for="c4" id="cc4"></label>
<label for="c5" id="cc5"></label>
<label for="c6" id="cc6"></label>
<label for="c7" id="cc7"></label>
<label for="c8" id="cc8"></label>
<label for="c9" id="cc9"></label>
</div>
<div id="pd">
<label for="d1" id="dd1"></label>
<label for="d2" id="dd2"></label>
<label for="d3" id="dd3"></label>
<label for="d4" id="dd4"></label>
<label for="d5" id="dd5"></label>
<label for="d6" id="dd6"></label>
<label for="d7" id="dd7"></label>
<label for="d8" id="dd8"></label>
<label for="d9" id="dd9"></label>
</div>
<div id="pe">
<label for="e1" id="ee1"></label>
<label for="e2" id="ee2"></label>
<label for="e3" id="ee3"></label>
<label for="e4" id="ee4"></label>
<label for="e5" id="ee5"></label>
<label for="e6" id="ee6"></label>
<label for="e7" id="ee7"></label>
<label for="e8" id="ee8"></label>
<label for="e9" id="ee9"></label>
</div>
<span id="o1">O</span>
<span id="o2">O</span>
<span id="o3">O</span>
<span id="o4">O</span>
<span id="o5">O</span>
<span id="o6">O</span>
<span id="o7">O</span>
<span id="o8">O</span>
<span id="o9">O</span>
<span id="x1">X</span>
<span id="x2">X</span>
<span id="x3">X</span>
<span id="x4">X</span>
<span id="x5">X</span>
<span id="x6">X</span>
<span id="x7">X</span>
<span id="x8">X</span>
<span id="x9">X</span>
<span id="d1">X</span>
<span id="d2">X</span>
<span id="d3">X</span>
<span id="d4">X</span>
<span id="d5">X</span>
<span id="d6">X</span>
<span id="d7">X</span>
<span id="d8">X</span>
<span id="d9">X</span>
<p id="wx1">I win</p>
<p id="wx2">I win</p>
<p id="wx3">I win</p>
<p id="wx4">I win</p>
<p id="wx5">I win</p>
<p id="wx6">I win</p>
<p id="wx7">I win</p>
<p id="wx8">I win</p>
<p id="wx9">I win</p>
<p id="dd1">draw</p>
<p id="dd2">draw</p>
<p id="dd3">draw</p>
<p id="dd4">draw</p>
<p id="dd5">draw</p>
<p id="dd6">draw</p>
<p id="dd7">draw</p>
<p id="dd8">draw</p>
<p id="dd9">draw</p>
<p id="wo1">You win</p>
<p id="wo2">You win</p>
<p id="wo3">You win</p>
<p id="wo4">You win</p>
<p id="wo5">You win</p>
<p id="wo6">You win</p>
<p id="wo7">You win</p>
<p id="wo8">You win</p>
<p id="wo9">You win</p>
</div>
<input id="button1" type="reset" value="Click for new game">
</form>