javascript - table selection with CSS/html -

i have 5x5 grid , im using tables , able edit using css first 5 cant rest.

is there away can change colour of each individual cell. need empty square 11 black squares , 13 white squares.

i have been trying use works to td:nth-child(1)

    .box tbody tr:first-child td:nth-child(1) {      width: 60px;           height: 60px;           margin: 1px;           text-align: center;           background-color: black;           font-weight: bold;           font-size: x-large; 

var id_empty;  var num_moves;  var iscompleted = false;  var time=0;  var nums = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25];    window.addeventlistener("load", starttimer, false);    function starttimer()  {      window.setinterval("updatetime()", 1000);  }     function updatetime()  {       ++time;      document.getelementbyid("time").innerhtml ="current time: " +time +" (seconds)";  }     function startpuzzle() {      num_moves = 0;      iscompleted = false;        for(var i=0; < 25; i++) {          var tmp = document.getelementbyid(i);          tmp.classname = "cell ";      }        randomnumber = nums.sort(function () { return (math.round(math.random())-0.5);});      while(!problem.prototype.is_solvable(randomnumber)) {          randomnumber = nums.sort(function () { return (math.round(math.random())-0.5);});      }        for(var i=0; < 25; i++) {          var tmp = document.getelementbyid(i);          if(randomnumber[i] == 25) {              tmp.classname = "cell empty";              tmp.innerhtml = "";              id_empty = i;          }          else              tmp.innerhtml = randomnumber[i];      }    }    function clickcell(x)  {      if(iscompleted)          return;        if(x.id != id_empty+'') {          var emptyi = math.floor(id_empty/5);          var emptyj = id_empty % 5;          var id_selected = number(x.id);          var selectedi = math.floor(id_selected/5);          var selectedj = id_selected % 5;            if((math.abs(emptyi - selectedi) == 1 && emptyj == selectedj) ||             (math.abs(emptyj - selectedj) == 1 && emptyi == selectedi)) {                document.getelementbyid(id_empty).classname = "cell";              document.getelementbyid(id_empty).innerhtml = x.innerhtml;                            x.classname = "cell empty";              x.innerhtml = '';                            id_empty = id_selected;              num_moves++;                document.getelementbyid("moves").innerhtml = "moves far: " + num_moves;                            if(isdone()){                  iscompleted = true;                  document.getelementbyid("moves").innerhtml = "letter complete - shuffle tiles" + num_moves;              }          }      }  }    <!-- done fuction can used letter recognition , future work -->    function isdone() {      return document.getelementbyid('0').innerhtml == '1' &&          document.getelementbyid('1').innerhtml == '2' &&          document.getelementbyid('2').innerhtml == '3' &&          document.getelementbyid('3').innerhtml == '4' &&          document.getelementbyid('4').innerhtml == '5' &&          document.getelementbyid('5').innerhtml == '6' &&          document.getelementbyid('6').innerhtml == '7' &&          document.getelementbyid('7').innerhtml == '8' &&          document.getelementbyid('8').innerhtml == '9' &&          document.getelementbyid('9').innerhtml == '10' &&          document.getelementbyid('10').innerhtml == '11' &&          document.getelementbyid('11').innerhtml == '12' &&          document.getelementbyid('12').innerhtml == '13' &&          document.getelementbyid('13').innerhtml == '14' &&          document.getelementbyid('14').innerhtml == '15' &&  		document.getelementbyid('15').innerhtml == '16' &&          document.getelementbyid('16').innerhtml == '17' &&          document.getelementbyid('17').innerhtml == '18' &&          document.getelementbyid('18').innerhtml == '19' &&          document.getelementbyid('19').innerhtml == '20' &&          document.getelementbyid('20').innerhtml == '21' &&          document.getelementbyid('21').innerhtml == '22' &&          document.getelementbyid('22').innerhtml == '23' &&          document.getelementbyid('23').innerhtml == '24' &&          document.getelementbyid('24').innerhtml == '25' ;  }      function lastclick() {      var curr_state = currentstate();      var problem = new problem(curr_state);      var sol = solver.a_star_search(problem);      var result = "<ol>";      for(var = 0; < sol.length; i++) {          var n = movenumb(sol[i],curr_state);          curr_state = problem.result(sol[i],curr_state);          result += "<li>move " + n + "</li>";      }      result += "</ol>";      document.getelementbyid("steps").innerhtml = result;  }      function currentstate() {      var result = [];      for(var = 0; < 25; i++) {          var tmp = document.getelementbyid(string(i)).innerhtml;          if(tmp == '') {              result[i] = 25;          }          else {              result[i] = number(tmp);          }      }      return result;  }    function movenumb(action,state) {      var = state.indexof(25);      switch(action) {      case action.up:          return state[util.index(util.x(i),util.y(i) - 1)];      case action.down:          return state[util.index(util.x(i),util.y(i) + 1)];      case action.right:          return state[util.index(util.x(i) + 1,util.y(i))];      case action.left:          return state[util.index(util.x(i) - 1,util.y(i))];      }  }    array.prototype.clone = function() { return this.slice(0); };  array.prototype.swap = function(i1,i2) {      var copy = this.clone();      var tmp = copy[i1];      copy[i1] = copy[i2];      copy[i2] = tmp;      return copy;  };      var problem = function(start_state) {      this.init_state = start_state;      return this;  }    problem.prototype.is_solvable = function(start) {      start = start.clone();    start.splice(start.indexof(25), 1);      start[24] = 25;      var count = 0;      for(var = 0; < 24; i++) {          if(start[i] != i+1) {              count++;              var j = start.indexof(i+1);              start[j] = start[i];              start[i] = i+1;          }      }      return count % 2 == 0;  }

.box {                border-style: solid;                border-color: black;                border-width: 5px;                margin: 5px;            }                .cell {                width: 60px;                height: 60px;                margin: 1px;                text-align: center;                background-color: black;                font-weight: bold;                font-size: x-large;                padding: 0px;            }    		    		  .wcell {                width: 60px;                height: 60px;                margin: 1px;                text-align: center;                background-color: white;  			        text:white;  			       font: black;                font-weight: bold;                font-size: x-large;                padding: 0px;            }  		                               .empty {                background-color: white;            }

<!doctype html public "-//w3c//dtd html 4.01 transitional//en">  <html>      <head>          <title></title>          <link href="style.css" rel="stylesheet" />          <script src="puzzle.js" type="text/javascript"></script>      </head>        <body onload="startpuzzle()">        <h2></h2>        <p id="moves"></p>        <p id="time"></p>        <p>        <button onclick="window.location.reload()">shuffle tiles</button>        </p>        <p>        </p>        <table class="box">          <tr>            <td id="0" class="wcell" onclick="clickcell(this)">1</td>            <td id="1" class="wcell" onclick="clickcell(this)">2</td>            <td id="2" class="wcell" onclick="clickcell(this)">3</td>            <td id="3" class="wcell" onclick="clickcell(this)">4</td>  		  <td id="4" class="wcell" onclick="clickcell(this)">5</td>          </tr>          <tr>            <td id="5" class="wcell" onclick="clickcell(this)">6</td>            <td id="6" class="wcell" onclick="clickcell(this)">7</td>            <td id="7" class="wcell" onclick="clickcell(this)">8</td>  		  <td id="8" class="wcell" onclick="clickcell(this)">9</td>            <td id="9" class="wcell" onclick="clickcell(this)">10</td>          </tr>          <tr>            <td id="10" class="wcell" onclick="clickcell(this)">11</td>            <td id="11" class="cell" onclick="clickcell(this)">12</td>  		  <td id="12" class="wcell" onclick="clickcell(this)">13</td>            <td id="13" class="wcell" onclick="clickcell(this)">14</td>            <td id="14" class="cell" onclick="clickcell(this)">15</td>          </tr>          <tr>            <td id="15" class="cell" onclick="clickcell(this)">16</td>  		  <td id="16" class="cell" onclick="clickcell(this)">17</td>            <td id="17" class="cell" onclick="clickcell(this)">18</td>            <td id="18" class="cell" onclick="clickcell(this)">19</td>  		  <td id="19" class="cell" onclick="clickcell(this)">20</td>          </tr>  		 <tr>            <td id="20" class="cell" onclick="clickcell(this)">21</td>  		  <td id="21" class="cell" onclick="clickcell(this)">22</td>            <td id="22" class="cell" onclick="clickcell(this)">23</td>            <td id="23" class="cell" onclick="clickcell(this)">24</td>  		  <td id="24" class="cell" onclick="clickcell(this)">25</td>          </tr>        </table>      </body>  </html>

hi every cell has different id can use id colour each cell differently.

#12{ background: green;}