CODEWITHSUNDEEP
csshtmlchesschessboard.js
i545219
i545219

Reputation: 93

chess table without pseudo classes

How I can create chess table if I cant change in the HTML-code, adding only the styles in the STYLE tag, lead the table to the form, is shown in the right figure. pseudo selectors : Not,: nth-child (i),: nth-child (an + b),: nth-of-type (i),: nth-of-type (an + b) are not used.

Table is 10*10. I could create only green border. I need only chess markup(white and black).

<style>     
  table.ches td
  {
    width: 100px;
    height: 100px;
    border: solid black 2px;
  }

 table.ches  tr :first-child{background:  green;
    color:  black;}

    table.ches tr:first-child>td {background:  green;
    color:  red;}

     table.ches tr:last-child>td {background:  green;
    color:  black;}

     table.ches  tr :last-child{background:  green;
    color:  black;}

</style>

<table class="ches">
<tbody><tr>
  <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
<tr>
  <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
<tr>
  <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
<tr>
  <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
<tr>
  <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
<tr>
  <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
<tr>
  <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
<tr>
  <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
<tr>
  <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
<tr>
  <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
</tbody></table>

</body>

Upvotes: 1

Views: 229

Answers (1)

bowheart
bowheart

Reputation: 4676

Although nth-of-type(i) and nth-of-type(an + b) are not allowed, I'm guessing that doesn't mean nth-of-type(even|odd) are out? If so, the CSS is simple: Just make all even tds inside even trs and all odd tds inside odd trs black:

tr:nth-of-type(even) td:nth-of-type(even),
tr:nth-of-type(odd) td:nth-of-type(odd) {
    background: black;
}

Here's a working JSFiddle. Cheers!

Upvotes: 1

Related Questions