Mobile Friendly Website

CSSPLAY

Doing it with style

TUTORIALCSS ONLY tic-tac-toe Player v Computer

Date : 26th February 2015

For Chrome, Safari, Firefox, Opera (Developer), Android and iOS

O O O O O O O O O X X X X X X X X X X X X X X X X X X

I win

I win

I win

I win

I win

I win

I win

I win

I win

draw

draw

draw

draw

draw

draw

draw

draw

draw

You win

You win

You win

You win

You win

You win

You win

You win

You win

Information

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.

HTML Code

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>

Cascading Style Sheet

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.


Terms and Conditions

This demonstration can be used subject to the following terms and conditions.

  1. If you wish to use this demonstration in your website(s) please email me stu{at}cssplay.co.uk seeking permission.
  2. You may NOT place this demonstration on another site for others to download.
  3. You may NOT redistrubute or resell this demonstration.
  4. Users agree not to remove or edit the credit notice within the stylesheet, or claim that this demonstration is their own.
  5. Please see the Copyright statement above regarding the requirement for a support donation.

Support CSSPLAY

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.


CUSTOM SEARCH

Facebook Twitter rss feed Facebook Fan Page