table d'échecs sans pseudo-classes

Question

Comment je peux créer une table d'échecs si je ne peux pas changer dans le code HTML, en ajoutant seulement les styles dans la balise STYLE, mener le tableau au formulaire, est montré dans la figure de droite. pseudo-sélecteurs : Non ,: nième-enfant (i),: nième-enfant (an + b),: nième-de-type (i),: nième-de-type (an + b) ne sont pas utilisés.

Le tableau est 10 * 10. Je pourrais créer seulement la frontière verte. Je n'ai besoin que d'un balisage d'échecs (blanc et noir).

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

Answer 1

Bien que nth-of-type(i) et nth-of-type(an + b) ne sont pas autorisés, je suppose que cela ne signifie pas nth-of-type(even|odd) sont dehors? Dans ce cas, le CSS est simple: il suffit tous, même à l'intérieur même de tdtr s et tous les td impairs de l'intérieur étrange tr s noir:

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

Voici un JSFiddle de travail. À votre santé!