<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>