CSSPLAY
Doing it with style
Doing it with style
This page is mobile friendly.
Now that Chrome, Safari, Firefox, Opera (Developer), Android and iOS support the new :matches pseudo-class, albeit in their own styles of :-webkit-any() and :-moz-any(), I can convert and simplify my previous demonstration of tic-tac-toe so that the stylesheet is reduced by almost 50%.
Player starts first and plays noughts, the computer will then place its cross and the game continues until there is a winner or the game is drawn.
As with most games against the computer it is almost impossible to win so in this version I have made it possible for you to win in two ways. If you can follow the stylesheet you may be able to find these or you can just play the game and see if you can find them.
This makes use of checkboxes to hold the player choices at each stage. Noughts will play a maximum of 5 places so we have 5 sets of 9 checkboxes to cover all possible choices.
<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">O</label>
<label for="a2" id="aa2">O</label>
<label for="a3" id="aa3">O</label>
<label for="a4" id="aa4">O</label>
<label for="a5" id="aa5">O</label>
<label for="a6" id="aa6">O</label>
<label for="a7" id="aa7">O</label>
<label for="a8" id="aa8">O</label>
<label for="a9" id="aa9">O</label>
</div>
<div id="pb">
<label for="b1" id="bb1">O</label>
<label for="b2" id="bb2">O</label>
<label for="b3" id="bb3">O</label>
<label for="b4" id="bb4">O</label>
<label for="b5" id="bb5">O</label>
<label for="b6" id="bb6">O</label>
<label for="b7" id="bb7">O</label>
<label for="b8" id="bb8">O</label>
<label for="b9" id="bb9">O</label>
</div>
<div id="pc">
<label for="c1" id="cc1">O</label>
<label for="c2" id="cc2">O</label>
<label for="c3" id="cc3">O</label>
<label for="c4" id="cc4">O</label>
<label for="c5" id="cc5">O</label>
<label for="c6" id="cc6">O</label>
<label for="c7" id="cc7">O</label>
<label for="c8" id="cc8">O</label>
<label for="c9" id="cc9">O</label>
</div>
<div id="pd">
<label for="d1" id="dd1">O</label>
<label for="d2" id="dd2">O</label>
<label for="d3" id="dd3">O</label>
<label for="d4" id="dd4">O</label>
<label for="d5" id="dd5">O</label>
<label for="d6" id="dd6">O</label>
<label for="d7" id="dd7">O</label>
<label for="d8" id="dd8">O</label>
<label for="d9" id="dd9">O</label>
</div>
<div id="pe">
<label for="e1" id="ee1">O</label>
<label for="e2" id="ee2">O</label>
<label for="e3" id="ee3">O</label>
<label for="e4" id="ee4">O</label>
<label for="e5" id="ee5">O</label>
<label for="e6" id="ee6">O</label>
<label for="e7" id="ee7">O</label>
<label for="e8" id="ee8">O</label>
<label for="e9" id="ee9">O</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="wd1">draw</p>
<p id="wd2">draw</p>
<p id="wd3">draw</p>
<p id="wd4">draw</p>
<p id="wd5">draw</p>
<p id="wd6">draw</p>
<p id="wd7">draw</p>
<p id="wd8">draw</p>
<p id="wd9">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>
This stylesheet shows how :matches will be used once supported by all browsers. My stylesheet uses :-webkit-any for Chrome, Safari and Opera (Developer) and :-moz-any for Firefox.
/* for all browsers */
#gr {
width:300px;
height:300px;
position:relative;
margin:0 auto;
z-index:10;
}
#button1 {
display:block;
width:200px;
background:#ccc;
font:300 18px/26px 'Open Sans', arial, sans-serif;
color:#000;
border:0;
padding:10px;
border-radius:4px;
margin:0 auto;
margin-top:100px;
cursor:pointer;
}
#gr:before {
content:"";
display:block;
width:94px;
height:300px;
border:6px solid #000;
border-width:0 6px;
position:absolute;
left:97px;
top:0;
z-index:-1;
}
#gr:after {
content:"";
display:block;
width:300px;
height:94px;
border:6px solid #000;
border-width:6px 0;
position:absolute;
left:0;
top:97px;
z-index:-1;
}
#gr div {
position:absolute;
left:0;
top:0;
width:300px;
height:300px;
z-index:5;
}
#gr p {
padding:300px 0 0 0;
margin:0;
font:300 50px/100px 'Open Sans', arial, sans-serif;
color:#000;
width:300px;
text-align:center;
position:absolute;
left:0;
top:0;
display:none;
z-index:200;
}
#gr input {
display:none;
position:absolute;
left:-9999px;
}
#gr label {
display:block;
width:100px;
height:100px;
cursor:pointer;
float:left;
position:relative;
font:300 70px/100px 'Open Sans', arial, sans-serif;
color:#c00;
text-align:center;
opacity:0;
-webkit-transition: opacity 0.5s;
transition: opacity 0.5s;
}
#gr label:hover {
opacity:1;
}
#gr span {
width:100px;
height:100px;
position:absolute;
z-index:100;
display:none;
font:600 70px/100px 'Open Sans', arial, sans-serif;
color:#000;
text-align:center;
}
#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:#c00;
background:rgba(200,0,0,0.1);
border-radius:10px;
z-index:-1;
opacity:0;
display:block;
transition:0.5s;
-webkit-transition:0.5s;
}
#gr *[id*="x"] {
color:#080;
background:rgba(0,128,0,0.1);
border-radius:10px;
z-index:-1;
opacity:0;
display:block;
transition:0.5s 0.5s;
-webkit-transition:0.5s 0.5s;
}
#gr span[id*="d"] {
color:#080;
background:rgba(0,128,0,0.1);
border-radius:10px;
z-index:-1;
opacity:0;
display:block;
transition:0.5s 0.5s;
-webkit-transition:0.5s 0.5s;
}
#gr p[id*="d"] {
color:#000;
z-index:-1;
opacity:0;
display:block;
transition:0.5s 0.5s;
-webkit-transition:0.5s 0.5s;
}
#gr *[id*="wd"] {
color:#000;
z-index:-1;
opacity:0;
display:block;
transition:0.5s 0.5s;
-webkit-transition:0.5s 0.5s;
}
#gr *[id*="w"] {
background:transparent !important;
}
#gr label[id*="aa"]:hover,
#gr label[id*="bb"]:hover,
#gr label[id*="cc"]:hover,
#gr label[id*="dd"]:hover,
#gr label[id*="ee"]:hover,
#gr label[id*="ff"]:hover {opacity:1;}
#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;}
/* for all browsers when :matches is supported. At the moment (Feb 2015) Gecko uses :-moz-any and Webkit uses :-webkit-any */
#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 input:matches(#a1,#a2):checked ~ input:matches(#b1,#b2):checked ~ #x3,
#gr input:matches(#a1,#a2):checked ~ input:matches(#b1,#b2):checked ~ input[id*="c"]:not([id*="c7"]):checked ~ *[id*="x7"],
#gr input:matches(#a1,#a2):checked ~ input:matches(#b1,#b2):checked ~ #c7:checked ~ #x4,
#gr input:matches(#a1,#a2):checked ~ input:matches(#b1,#b2):checked ~ #c7:checked ~ input[id*="d"]:not([id*="d6"]):checked ~ *[id*="x6"],
#gr input:matches(#a1,#a2):checked ~ input:matches(#b1,#b2):checked ~ #c7:checked ~ #d6:checked ~ *[id*="d8"],
#gr input:matches(#a1,#a3):checked ~ input:matches(#b1,#b3):checked ~ #x2,
#gr input:matches(#a1,#a3):checked ~ input:matches(#b1,#b3):checked ~ input[id*="c"]:not([id*="c8"]):checked ~ *[id*="x8"],
#gr input:matches(#a1,#a3):checked ~ input:matches(#b1,#b3):checked ~ #c8:checked ~ #x4,
#gr input:matches(#a1,#a3):checked ~ input:matches(#b1,#b3):checked ~ #c8:checked ~ input[id*="d"]:not([id*="d6"]):checked ~ *[id*="x6"],
#gr input:matches(#a1,#a3):checked ~ input:matches(#b1,#b3):checked ~ #c8:checked ~ #d6:checked ~ *[id*="d9"],
#gr input:matches(#a1,#a4):checked ~ input:matches(#b1,#b4):checked ~ #x7,
#gr input:matches(#a1,#a4):checked ~ input:matches(#b1,#b4):checked ~ input[id*="c"]:not([id*="c3"]):checked ~ *[id*="x3"],
#gr input:matches(#a1,#a4):checked ~ input:matches(#b1,#b4):checked ~ #c3:checked ~ #x2,
#gr input:matches(#a1,#a4):checked ~ input:matches(#b1,#b4):checked ~ #c3:checked ~ input[id*="d"]:not([id*="d8"]):checked ~ *[id*="x8"],
#gr input:matches(#a1,#a4):checked ~ input:matches(#b1,#b4):checked ~ #c3:checked ~ #d8:checked ~ *[id*="d6"],
#gr input:matches(#a1,#a6):checked ~ input:matches(#b1,#b6):checked ~ #x2,
#gr input:matches(#a1,#a6):checked ~ input:matches(#b1,#b6):checked ~ input[id*="c"]:not([id*="c8"]):checked ~ *[id*="x8"],
#gr input:matches(#a1,#a6):checked ~ input:matches(#b1,#b6):checked ~ #c8:checked ~ #x3,
#gr input:matches(#a1,#a6):checked ~ input:matches(#b1,#b6):checked ~ #c8:checked ~ input[id*="d"]:not([id*="d7"]):checked ~ *[id*="x7"],
#gr input:matches(#a1,#a6):checked ~ input:matches(#b1,#b6):checked ~ #c8:checked ~ #d7:checked ~ #x4,
#gr input:matches(#a1,#a6):checked ~ input:matches(#b1,#b6):checked ~ #c8:checked ~ #d7:checked ~ #e9:checked ~ #wo9,
#gr input:matches(#a1,#a7):checked ~ input:matches(#b1,#b7):checked ~ #x4,
#gr input:matches(#a1,#a7):checked ~ input:matches(#b1,#b7):checked ~ input[id*="c"]:not([id*="c6"]):checked ~ *[id*="x6"],
#gr input:matches(#a1,#a7):checked ~ input:matches(#b1,#b7):checked ~ #c6:checked ~ #x2,
#gr input:matches(#a1,#a7):checked ~ input:matches(#b1,#b7):checked ~ #c6:checked ~ input[id*="d"]:not([id*="d8"]):checked ~ *[id*="x8"],
#gr input:matches(#a1,#a7):checked ~ input:matches(#b1,#b7):checked ~ #c6:checked ~ #d8:checked ~ *[id*="d9"],
#gr input:matches(#a1,#a8):checked ~ input:matches(#b1,#b8):checked ~ #x4,
#gr input:matches(#a1,#a8):checked ~ input:matches(#b1,#b8):checked ~ input[id*="c"]:not([id*="c6"]):checked ~ *[id*="x6"],
#gr input:matches(#a1,#a8):checked ~ input:matches(#b1,#b8):checked ~ #c6:checked ~ #x3,
#gr input:matches(#a1,#a8):checked ~ input:matches(#b1,#b8):checked ~ #c6:checked ~ input[id*="d"]:not([id*="d7"]):checked ~ *[id*="x7"],
#gr input:matches(#a1,#a8):checked ~ input:matches(#b1,#b8):checked ~ #c6:checked ~ #d7:checked ~ *[id*="d9"],
#gr input:matches(#a1,#a9):checked ~ input:matches(#b1,#b9):checked ~ #x2,
#gr input:matches(#a1,#a9):checked ~ input:matches(#b1,#b9):checked ~ input[id*="c"]:not([id*="c8"]):checked ~ *[id*="x8"],
#gr input:matches(#a1,#a9):checked ~ input:matches(#b1,#b9):checked ~ #c8:checked ~ #x7,
#gr input:matches(#a1,#a9):checked ~ input:matches(#b1,#b9):checked ~ #c8:checked ~ input[id*="d"]:not([id*="d3"]):checked ~ *[id*="x3"],
#gr input:matches(#a1,#a9):checked ~ input:matches(#b1,#b9):checked ~ #c8:checked ~ #d3:checked ~ *[id*="d6"],
#gr input:matches(#a2,#a3):checked ~ input:matches(#b2,#b3):checked ~ #x1,
#gr input:matches(#a2,#a3):checked ~ input:matches(#b2,#b3):checked ~ input[id*="c"]:not([id*="c9"]):checked ~ *[id*="x9"],
#gr input:matches(#a2,#a3):checked ~ input:matches(#b2,#b3):checked ~ #c9:checked ~ #x6,
#gr input:matches(#a2,#a3):checked ~ input:matches(#b2,#b3):checked ~ #c9:checked ~ input[id*="d"]:not([id*="d4"]):checked ~ *[id*="x4"],
#gr input:matches(#a2,#a3):checked ~ input:matches(#b2,#b3):checked ~ #c9:checked ~ #d4:checked ~ *[id*="d7"],
#gr input:matches(#a2,#a4):checked ~ input:matches(#b2,#b4):checked ~ #x1,
#gr input:matches(#a2,#a4):checked ~ input:matches(#b2,#b4):checked ~ input[id*="c"]:not([id*="c9"]):checked ~ *[id*="x9"],
#gr input:matches(#a2,#a4):checked ~ input:matches(#b2,#b4):checked ~ #c9:checked ~ #x3,
#gr input:matches(#a2,#a4):checked ~ input:matches(#b2,#b4):checked ~ #c9:checked ~ input[id*="d"]:not([id*="d7"]):checked ~ *[id*="x7"],
#gr input:matches(#a2,#a4):checked ~ input:matches(#b2,#b4):checked ~ #c9:checked ~ #d7:checked ~ *[id*="d8"],
#gr input:matches(#a2,#a6):checked ~ input:matches(#b2,#b6):checked ~ #x3,
#gr input:matches(#a2,#a6):checked ~ input:matches(#b2,#b6):checked ~ input[id*="c"]:not([id*="c7"]):checked ~ *[id*="x7"],
#gr input:matches(#a2,#a6):checked ~ input:matches(#b2,#b6):checked ~ #c7:checked ~ #x1,
#gr input:matches(#a2,#a6):checked ~ input:matches(#b2,#b6):checked ~ #c7:checked ~ input[id*="d"]:not([id*="d9"]):checked ~ *[id*="x9"],
#gr input:matches(#a2,#a6):checked ~ input:matches(#b2,#b6):checked ~ #c7:checked ~ #d9:checked ~ *[id*="d8"],
#gr input:matches(#a2,#a7):checked ~ input:matches(#b2,#b7):checked ~ #x4,
#gr input:matches(#a2,#a7):checked ~ input:matches(#b2,#b7):checked ~ input[id*="c"]:not([id*="c6"]):checked ~ *[id*="x6"],
#gr input:matches(#a2,#a7):checked ~ input:matches(#b2,#b7):checked ~ #c6:checked ~ #x9,
#gr input:matches(#a2,#a7):checked ~ input:matches(#b2,#b7):checked ~ #c6:checked ~ input[id*="d"]:not([id*="d1"]):checked ~ *[id*="x1"],
#gr input:matches(#a2,#a7):checked ~ input:matches(#b2,#b7):checked ~ #c6:checked ~ #d1:checked ~ *[id*="d3"],
#gr input:matches(#a2,#a8):checked ~ input:matches(#b2,#b8):checked ~ #x1,
#gr input:matches(#a2,#a8):checked ~ input:matches(#b2,#b8):checked ~ input[id*="c"]:not([id*="c9"]):checked ~ *[id*="x9"],
#gr input:matches(#a2,#a8):checked ~ input:matches(#b2,#b8):checked ~ #c9:checked ~ #x7,
#gr input:matches(#a2,#a8):checked ~ input:matches(#b2,#b8):checked ~ #c9:checked ~ input[id*="d"]:not([id*="d3"]):checked ~ *[id*="x3"],
#gr input:matches(#a2,#a8):checked ~ input:matches(#b2,#b8):checked ~ #c9:checked ~ #d3:checked ~ *[id*="x4"],
#gr input:matches(#a2,#a9):checked ~ input:matches(#b2,#b9):checked ~ #x4,
#gr input:matches(#a2,#a9):checked ~ input:matches(#b2,#b9):checked ~ input[id*="c"]:not([id*="c6"]):checked ~ *[id*="x6"],
#gr input:matches(#a2,#a9):checked ~ input:matches(#b2,#b9):checked ~ #c6:checked ~ #x3,
#gr input:matches(#a2,#a9):checked ~ input:matches(#b2,#b9):checked ~ #c6:checked ~ input[id*="d"]:not([id*="d7"]):checked ~ *[id*="x7"],
#gr input:matches(#a2,#a9):checked ~ input:matches(#b2,#b9):checked ~ #c6:checked ~ #d7:checked ~ *[id*="d8"],
#gr input:matches(#a3,#a4):checked ~ input:matches(#b3,#b4):checked ~ #x2,
#gr input:matches(#a3,#a4):checked ~ input:matches(#b3,#b4):checked ~ input[id*="c"]:not([id*="c8"]):checked ~ *[id*="x8"],
#gr input:matches(#a3,#a4):checked ~ input:matches(#b3,#b4):checked ~ #c8:checked ~ #x9,
#gr input:matches(#a3,#a4):checked ~ input:matches(#b3,#b4):checked ~ #c8:checked ~ input[id*="d"]:not([id*="d1"]):checked ~ *[id*="x1"],
#gr input:matches(#a3,#a4):checked ~ input:matches(#b3,#b4):checked ~ #c8:checked ~ #d1:checked ~ *[id*="d7"],
#gr input:matches(#a3,#a6):checked ~ input:matches(#b3,#b6):checked ~ #x9,
#gr input:matches(#a3,#a6):checked ~ input:matches(#b3,#b6):checked ~ input[id*="c"]:not([id*="c1"]):checked ~ *[id*="x1"],
#gr input:matches(#a3,#a6):checked ~ input:matches(#b3,#b6):checked ~ #c1:checked ~ #x2,
#gr input:matches(#a3,#a6):checked ~ input:matches(#b3,#b6):checked ~ #c1:checked ~ input[id*="d"]:not([id*="d8"]):checked ~ *[id*="x8"],
#gr input:matches(#a3,#a6):checked ~ input:matches(#b3,#b6):checked ~ #c1:checked ~ #d8:checked ~ *[id*="d7"],
#gr input:matches(#a3,#a7):checked ~ input:matches(#b3,#b7):checked ~ #x4,
#gr input:matches(#a3,#a7):checked ~ input:matches(#b3,#b7):checked ~ input[id*="c"]:not([id*="c6"]):checked ~ *[id*="x6"],
#gr input:matches(#a3,#a7):checked ~ input:matches(#b3,#b7):checked ~ #c6:checked ~ #x9,
#gr input:matches(#a3,#a7):checked ~ input:matches(#b3,#b7):checked ~ #c6:checked ~ input[id*="d"]:not([id*="d1"]):checked ~ *[id*="x1"],
#gr input:matches(#a3,#a7):checked ~ input:matches(#b3,#b7):checked ~ #c6:checked ~ #d1:checked ~ *[id*="d2"],
#gr input:matches(#a3,#a8):checked ~ input:matches(#b3,#b8):checked ~ #x6,
#gr input:matches(#a3,#a8):checked ~ input:matches(#b3,#b8):checked ~ input[id*="c"]:not([id*="c4"]):checked ~ *[id*="x4"],
#gr input:matches(#a3,#a8):checked ~ input:matches(#b3,#b8):checked ~ #c4:checked ~ #x1,
#gr input:matches(#a3,#a8):checked ~ input:matches(#b3,#b8):checked ~ #c4:checked ~ input[id*="d"]:not([id*="d9"]):checked ~ *[id*="x9"],
#gr input:matches(#a3,#a8):checked ~ input:matches(#b3,#b8):checked ~ #c4:checked ~ #d9:checked ~ *[id*="d7"],
#gr input:matches(#a3,#a9):checked ~ input:matches(#b3,#b9):checked ~ #x6,
#gr input:matches(#a3,#a9):checked ~ input:matches(#b3,#b9):checked ~ input[id*="c"]:not([id*="c4"]):checked ~ *[id*="x4"],
#gr input:matches(#a3,#a9):checked ~ input:matches(#b3,#b9):checked ~ #c4:checked ~ #x2,
#gr input:matches(#a3,#a9):checked ~ input:matches(#b3,#b9):checked ~ #c4:checked ~ input[id*="d"]:not([id*="d8"]):checked ~ *[id*="x8"],
#gr input:matches(#a3,#a9):checked ~ input:matches(#b3,#b9):checked ~ #c4:checked ~ #d8:checked ~ *[id*="d7"],
#gr input:matches(#a4,#a6):checked ~ input:matches(#b4,#b6):checked ~ #x1,
#gr input:matches(#a4,#a6):checked ~ input:matches(#b4,#b6):checked ~ input[id*="c"]:not([id*="c9"]):checked ~ *[id*="x9"],
#gr input:matches(#a4,#a6):checked ~ input:matches(#b4,#b6):checked ~ #c9:checked ~ #x3,
#gr input:matches(#a4,#a6):checked ~ input:matches(#b4,#b6):checked ~ #c9:checked ~ input[id*="d"]:not([id*="d2"]):checked ~ *[id*="x2"],
#gr input:matches(#a4,#a6):checked ~ input:matches(#b4,#b6):checked ~ #c9:checked ~ #d2:checked ~ *[id*="x7"],
#gr input:matches(#a4,#a7):checked ~ input:matches(#b4,#b7):checked ~ #x1,
#gr input:matches(#a4,#a7):checked ~ input:matches(#b4,#b7):checked ~ input[id*="c"]:not([id*="c9"]):checked ~ *[id*="x9"],
#gr input:matches(#a4,#a7):checked ~ input:matches(#b4,#b7):checked ~ #c9:checked ~ #x8,
#gr input:matches(#a4,#a7):checked ~ input:matches(#b4,#b7):checked ~ #c9:checked ~ input[id*="d"]:not([id*="d2"]):checked ~ *[id*="x2"],
#gr input:matches(#a4,#a7):checked ~ input:matches(#b4,#b7):checked ~ #c9:checked ~ #d2:checked ~ *[id*="d3"],
#gr input:matches(#a4,#a8):checked ~ input:matches(#b4,#b8):checked ~ #x7,
#gr input:matches(#a4,#a8):checked ~ input:matches(#b4,#b8):checked ~ input[id*="c"]:not([id*="c3"]):checked ~ *[id*="x3"],
#gr input:matches(#a4,#a8):checked ~ input:matches(#b4,#b8):checked ~ #c3:checked ~ #x1,
#gr input:matches(#a4,#a8):checked ~ input:matches(#b4,#b8):checked ~ #c3:checked ~ input[id*="d"]:not([id*="d9"]):checked ~ *[id*="x9"],
#gr input:matches(#a4,#a8):checked ~ input:matches(#b4,#b8):checked ~ #c3:checked ~ #d9:checked ~ *[id*="d6"],
#gr input:matches(#a4,#a9):checked ~ input:matches(#b4,#b9):checked ~ #x8,
#gr input:matches(#a4,#a9):checked ~ input:matches(#b4,#b9):checked ~ input[id*="c"]:not([id*="c2"]):checked ~ *[id*="x2"],
#gr input:matches(#a4,#a9):checked ~ input:matches(#b4,#b9):checked ~ #c2:checked ~ #x3,
#gr input:matches(#a4,#a9):checked ~ input:matches(#b4,#b9):checked ~ #c2:checked ~ input[id*="d"]:not([id*="d7"]):checked ~ *[id*="x7"],
#gr input:matches(#a4,#a9):checked ~ input:matches(#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 ~ input:matches(#b7,#b9):checked ~ #x3,
#gr #a5:checked ~ #b8:checked ~ #x2,
#gr #a5:checked ~ #b2:checked ~ input:matches(#c3,#c9):checked ~ #x7,
#gr #a5:checked ~ input:matches(#b4,#b8):checked ~ #c3:checked ~ #x7,
#gr #a5:checked ~ input:matches(#b2,#b3):checked ~ #c4:checked ~ #x6,
#gr #a5:checked ~ #b2:checked ~ #c6:checked ~ #x4,
#gr #a5:checked ~ input:matches(#b2,#b4,#b6):checked ~ #c7:checked ~ #x3,
#gr #a5:checked ~ input:matches(#b4,#b7,#b9):checked ~ #c2:checked ~ #x8,
#gr #a5:checked ~ #b4:checked ~ input:matches(#c8,#c9):checked ~ #x2,
#gr #a5:checked ~ #b2:checked ~ input:matches(#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 ~ input:matches(#b2,#b7):checked ~ input:matches(#c2,#c7):checked ~ input[id*="d"]:not([id*="d4"]):checked ~ *[id*="d4"],
#gr #a5:checked ~ input:matches(#b2,#b4):checked ~ input:matches(#c2,#c4):checked ~ input[id*="d"]:not([id*="d3"]):checked ~ *[id*="d3"],
#gr #a5:checked ~ #b4:checked ~ input:matches(#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 ~ input:matches(#c2,#c8,#c9):checked ~ #d3:checked ~ *[id*="d7"],
#gr #a5:checked ~ #b2:checked ~ #c6:checked ~ #d7:checked ~ *[id*="d3"],
#gr #a5:checked ~ #b2:checked ~ input:matches(#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*="x2"],
#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 input:matches(#a6,#a7):checked ~ input:matches(#b6,#b7):checked ~ #x8,
#gr input:matches(#a6,#a7):checked ~ input:matches(#b6,#b7):checked ~ input[id*="c"]:not([id*="c2"]):checked ~ *[id*="x2"],
#gr input:matches(#a6,#a7):checked ~ input:matches(#b6,#b7):checked ~ #c2:checked ~ #x1,
#gr input:matches(#a6,#a7):checked ~ input:matches(#b6,#b7):checked ~ #c2:checked ~ input[id*="d"]:not([id*="d9"]):checked ~ *[id*="x9"],
#gr input:matches(#a6,#a7):checked ~ input:matches(#b6,#b7):checked ~ #c2:checked ~ #d9:checked ~ *[id*="d3"],
#gr input:matches(#a6,#a8):checked ~ input:matches(#b6,#b8):checked ~ #x9,
#gr input:matches(#a6,#a8):checked ~ input:matches(#b6,#b8):checked ~ input[id*="c"]:not([id*="c1"]):checked ~ *[id*="x1"],
#gr input:matches(#a6,#a8):checked ~ input:matches(#b6,#b8):checked ~ #c1:checked ~ #x7,
#gr input:matches(#a6,#a8):checked ~ input:matches(#b6,#b8):checked ~ #c1:checked ~ input[id*="d"]:not([id*="d3"]):checked ~ *[id*="x3"],
#gr input:matches(#a6,#a8):checked ~ input:matches(#b6,#b8):checked ~ #c1:checked ~ #d3:checked ~ *[id*="d2"],
#gr input:matches(#a6,#a9):checked ~ input:matches(#b6,#b9):checked ~ #x3,
#gr input:matches(#a6,#a9):checked ~ input:matches(#b6,#b9):checked ~ input[id*="c"]:not([id*="c7"]):checked ~ *[id*="x7"],
#gr input:matches(#a6,#a9):checked ~ input:matches(#b6,#b9):checked ~ #c7:checked ~ #x8,
#gr input:matches(#a6,#a9):checked ~ input:matches(#b6,#b9):checked ~ #c7:checked ~ input[id*="d"]:not([id*="d2"]):checked ~ *[id*="x2"],
#gr input:matches(#a6,#a9):checked ~ input:matches(#b6,#b9):checked ~ #c7:checked ~ #d2:checked ~ *[id*="d1"],
#gr input:matches(#a7,#a8):checked ~ input:matches(#b7,#b8):checked ~ #x9,
#gr input:matches(#a7,#a8):checked ~ input:matches(#b7,#b8):checked ~ input[id*="c"]:not([id*="c1"]):checked ~ *[id*="x1"],
#gr input:matches(#a7,#a8):checked ~ input:matches(#b7,#b8):checked ~ #c1:checked ~ #x4,
#gr input:matches(#a7,#a8):checked ~ input:matches(#b7,#b8):checked ~ #c1:checked ~ input[id*="d"]:not([id*="d6"]):checked ~ *[id*="x6"],
#gr input:matches(#a7,#a8):checked ~ input:matches(#b7,#b8):checked ~ #c1:checked ~ #d6:checked ~ *[id*="d2"],
#gr input:matches(#a7,#a9):checked ~ input:matches(#b7,#b9):checked ~ #x8,
#gr input:matches(#a7,#a9):checked ~ input:matches(#b7,#b9):checked ~ input[id*="c"]:not([id*="c2"]):checked ~ *[id*="x2"],
#gr input:matches(#a7,#a9):checked ~ input:matches(#b7,#b9):checked ~ #c2:checked ~ #x4,
#gr input:matches(#a7,#a9):checked ~ input:matches(#b7,#b9):checked ~ #c2:checked ~ input[id*="d"]:not([id*="d6"]):checked ~ *[id*="x6"],
#gr input:matches(#a7,#a9):checked ~ input:matches(#b7,#b9):checked ~ #c2:checked ~ #d6:checked ~ *[id*="d3"],
#gr input:matches(#a8,#a9):checked ~ input:matches(#b8,#b9):checked ~ #x7,
#gr input:matches(#a8,#a9):checked ~ input:matches(#b8,#b9):checked ~ input[id*="c"]:not([id*="c3"]):checked ~ *[id*="x3"],
#gr input:matches(#a8,#a9):checked ~ input:matches(#b8,#b9):checked ~ #c3:checked ~ #x6,
#gr input:matches(#a8,#a9):checked ~ input:matches(#b8,#b9):checked ~ #c3:checked ~ input[id*="d"]:not([id*="d4"]):checked ~ *[id*="x4"],
#gr input:matches(#a8,#a9):checked ~ input:matches(#b8,#b9):checked ~ #c3:checked ~ #d4:checked ~ *[id*="d1"] {display:block; opacity:1; z-index:100;}
You may use this method on your personal 'non-profit' web site without seeking my permission.
A link back to CSS PLAY is always appreciated.
Commercial usage is also permitted without seeking approval, but I would ask that a donation is considered to support my work on CSS PLAY.
If you are having problems integrating any of my demonstrations into your website then I now offer a service to fault find and correct any errors that you may have introduced.
Please email me for more information.
This demonstration can be used subject to the following terms and conditions.
Your donations keep CSS PLAY running.
If your donation is for the use of a demo then please email me with the demo url after making your donation.
