Pure CSS Chessboard with Div & No Classes or Ids, Is It Possible

Pure css Chessboard with div & no classes or ids, is it possible?

You don't have to hardcode each :nth-child(). Here's one way to shorten it. Each selector corresponds to a row on the chessboard:

#chess div:nth-child(-2n+8), 
#chess div:nth-child(8) ~ div:nth-child(-2n+15), 
#chess div:nth-child(16) ~ div:nth-child(-2n+24),
#chess div:nth-child(24) ~ div:nth-child(-2n+31),
#chess div:nth-child(32) ~ div:nth-child(-2n+40),
#chess div:nth-child(40) ~ div:nth-child(-2n+47),
#chess div:nth-child(48) ~ div:nth-child(-2n+56),
#chess div:nth-child(56) ~ div:nth-child(-2n+63) {
    background-color: #000;
}

jsFiddle preview

How to make checkered chess board pattern with CSS

I don't know if this is what you'd call elegant but I've colored every piece manually by selecting odd and even on different rows. This gives you your chessboard. You can templatize this if you're using SASS or so but in pure CSS, I cannot think of a simpler way to do this. Maybe someone can provide a better way for you.

.board-sqr:nth-child(n + 1):nth-child(odd):nth-child(-n + 8),
.board-sqr:nth-child(n + 9):nth-child(even):nth-child(-n + 16),
.board-sqr:nth-child(n + 17):nth-child(odd):nth-child(-n + 24),
.board-sqr:nth-child(n + 25):nth-child(even):nth-child(-n + 32),
.board-sqr:nth-child(n + 33):nth-child(odd):nth-child(-n + 40),
.board-sqr:nth-child(n + 41):nth-child(even):nth-child(-n + 48),
.board-sqr:nth-child(n + 49):nth-child(odd):nth-child(-n + 56),
.board-sqr:nth-child(n + 57):nth-child(even):nth-child(-n + 64) {
  background: white;
}

.board-sqr:nth-child(n + 2):nth-child(even):nth-child(-n + 8),
.board-sqr:nth-child(n + 9):nth-child(odd):nth-child(-n + 16),
.board-sqr:nth-child(n + 17):nth-child(even):nth-child(-n + 24),
.board-sqr:nth-child(n + 25):nth-child(odd):nth-child(-n + 32),
.board-sqr:nth-child(n + 33):nth-child(even):nth-child(-n + 40),
.board-sqr:nth-child(n + 41):nth-child(odd):nth-child(-n + 48),
.board-sqr:nth-child(n + 49):nth-child(even):nth-child(-n + 56),
.board-sqr:nth-child(n + 57):nth-child(odd):nth-child(-n + 64) {
  background: black;
  color: white;
}

Sample Image

In the code, I've used the psuedo classes in chain to control the start and end of their selection.

.board-sqr:nth-child(n + 1):nth-child(odd):nth-child(-n + 8)

This basically says select every odd element between 1 and 8.

How do I create a checker patterned chessboard using css?

Try Considering This One:

Probably Might Help You. You just need to replace your Chess Pieces.

<head>
    <style type="text/css">
        #chessboard, .black_square, .white_square {
    display:block;
    padding:0px;
    margin:0px;
}

#chessboard {
    width:384px;
    height:384px;
    border:4px solid #FF0000;
}

.black_square, .white_square {
    width:48px;
    height:48px;
    float:left;
}

.black_square {
    background-color: gray;
}

.white_square {
    background-color: green;
}

    </style>
</head>

<div id="chessboard">
    <div>
        <div class="white_square" id="KR8"></div>
        <div class="black_square" id="KN8"></div>
        <div class="white_square" id="KB8"></div>
        <div class="black_square" id="K8"></div>
        <div class="white_square" id="Q8"></div>
        <div class="black_square" id="QB8"></div>
        <div class="white_square" id="QN8"></div>
        <div class="black_square" id="QR8"></div>
    </div>
    <div>
        <div class="black_square" id="KR7"></div>
        <div class="white_square" id="KN7"></div>
        <div class="black_square" id="KB7"></div>
        <div class="white_square" id="K7"></div>
        <div class="black_square" id="Q7"></div>
        <div class="white_square" id="QB7"></div>
        <div class="black_square" id="QN7"></div>
        <div class="white_square" id="QR7"></div>
    </div>
    <div>
        <div class="white_square" id="KR6"></div>
        <div class="black_square" id="KN6"></div>
        <div class="white_square" id="KB6"></div>
        <div class="black_square" id="K6"></div>
        <div class="white_square" id="Q6"></div>
        <div class="black_square" id="QB6"></div>
        <div class="white_square" id="QN6"></div>
        <div class="black_square" id="QR6"></div>
    </div>
    <div>
        <div class="black_square" id="KR5"></div>
        <div class="white_square" id="KN5"></div>
        <div class="black_square" id="KB5"></div>
        <div class="white_square" id="K5"></div>
        <div class="black_square" id="Q5"></div>
        <div class="white_square" id="QB5"></div>
        <div class="black_square" id="QN5"></div>
        <div class="white_square" id="QR5"></div>
    </div>
    <div>
        <div class="white_square" id="KR4"></div>
        <div class="black_square" id="KN4"></div>
        <div class="white_square" id="KB4"></div>
        <div class="black_square" id="K4"></div>
        <div class="white_square" id="Q4"></div>
        <div class="black_square" id="QB4"></div>
        <div class="white_square" id="QN4"></div>
        <div class="black_square" id="QR4"></div>
    </div>
    <div>
        <div class="black_square" id="KR3"></div>
        <div class="white_square" id="KN3"></div>
        <div class="black_square" id="KB3"></div>
        <div class="white_square" id="K3"></div>
        <div class="black_square" id="Q3"></div>
        <div class="white_square" id="QB3"></div>
        <div class="black_square" id="QN3"></div>
        <div class="white_square" id="QR3"></div>
    </div>
    <div>
        <div class="white_square" id="KR2"></div>
        <div class="black_square" id="KN2"></div>
        <div class="white_square" id="KB2"></div>
        <div class="black_square" id="K2"></div>
        <div class="white_square" id="Q2"></div>
        <div class="black_square" id="QB2"></div>
        <div class="white_square" id="QN2"></div>
        <div class="black_square" id="QR2"></div>
    </div>
    <div>
        <div class="black_square" id="KR1"></div>
        <div class="white_square" id="KN1"></div>
        <div class="black_square" id="KB1"></div>
        <div class="white_square" id="K1"></div>
        <div class="black_square" id="Q1"></div>
        <div class="white_square" id="QB1"></div>
        <div class="black_square" id="QN1"></div>
        <div class="white_square" id="QR1"></div>
    </div>
</div>

how to create chekerboard using nth-child(odd&even) with 8x8 grid

It is like one of the many options for constructing an 8x8 checkerboard using a grid.

Use double and triple nth-child() to build sections with background-color: rgb(40, 40, 194) background:

:nth-child(-n + 8):nth-child(even),
:nth-child(n + 8):nth-child(-n + 16):nth-child(odd),
...
:nth-child(n + 57):nth-child(-n + 64):nth-child(odd)

This creates an interval.

For the rest of the cells (light), specify the background color background-color: rgb(185, 48, 48), use the css rule as for everyone.

.papan {
    display: grid;
    grid-template-columns: repeat(8, 50px);
    grid-template-rows: repeat(8, 50px);
    justify-content: center;
    margin: auto;
    padding-top: 50px;
}

.papan div {
    border: 1px solid black;
    background-color: rgb(185, 48, 48);
}

.papan div:nth-child(-n + 8):nth-child(even),
.papan div:nth-child(n + 8):nth-child(-n + 16):nth-child(odd),
.papan div:nth-child(n + 17):nth-child(-n + 24):nth-child(even),
.papan div:nth-child(n + 25):nth-child(-n + 32):nth-child(odd),
.papan div:nth-child(n + 33):nth-child(-n + 40):nth-child(even),
.papan div:nth-child(n + 41):nth-child(-n + 48):nth-child(odd),
.papan div:nth-child(n + 49):nth-child(-n + 56):nth-child(even),
.papan div:nth-child(n + 57):nth-child(-n + 64):nth-child(odd) {
    background-color: rgb(40, 40, 194);
}

.papan div:hover {
    background-color: black;
}

.papan div:nth-child(-n + 8):nth-child(even):hover,
.papan div:nth-child(n + 8):nth-child(-n + 16):nth-child(odd):hover,
.papan div:nth-child(n + 17):nth-child(-n + 24):nth-child(even):hover,
.papan div:nth-child(n + 25):nth-child(-n + 32):nth-child(odd):hover,
.papan div:nth-child(n + 33):nth-child(-n + 40):nth-child(even):hover,
.papan div:nth-child(n + 41):nth-child(-n + 48):nth-child(odd):hover,
.papan div:nth-child(n + 49):nth-child(-n + 56):nth-child(even):hover,
.papan div:nth-child(n + 57):nth-child(-n + 64):nth-child(odd):hover {
    background-color: white;
}

<!DOCTYPE html>
<html>
    <head>
        <title>Papan Catur</title>
        <link rel="stylesheet" href="style.css" />
    </head>
    <body>
        <div class="papan">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>         
        </div>
    </body>
</html>

PHP chessboard how to change colors?

this way will work:

<!DOCTYPE html>
<html>
<head>
    <title>Schaakbord</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="schaakbord.css">
</head>
<body>
<form action="" method="GET">
    <select name="kleuren">
        <option name="kleur" value="yellow">Geel</option>
        <option name="kleur" value="red">Rood</option>
        <option name="kleur" value="blue">Blauw</option>
        <option name="kleur" value="green">Groen</option>
        <option name="kleur" value="purple">Paars</option>
        <option name="kleur" value="pink">Roze</option>
        <option name="kleur" value="brown">Bruin</option>
        <option name="kleur" value="orange">Oranje</option>
        <option name="kleur" value="with">Wit</option>
        <option name="kleur" value="gray">Grijs</option>
    </select>
    <input type="submit" name="submit">
 </form>
 <br/>
<?php
     if(isset($_GET["submit"])){
           echo "<table>";
           for($i=0;$i<8;$i++)
           {
              echo "<tr>";
              for($u=0;$u<8;$u++)
              {
                 if(($i + $u)%2 == 0)
                 {
                   echo "<td style='background-color:".$_GET["kleuren"]."'></td>";
                 }
                 else {
                     echo "<th></th>";
                 }
            }
            echo "</tr>";
     }
    echo "</table>";
 }
 ?>
 </body>
 </html>

Jquery - How to alternate an :Odd :Even pattern every 4 Divs ?

var i = 1;
$('#wrapper > div').each(function()
{
    var isEvenRow = Math.ceil(i / 4) % 2 == 0; // 4 is number of columns
    var isCellAlternate = i % 2 == isEvenRow ? 0 : 1;

    if ( isCellAlternate ) {
        $(this).css("background-color", "#000");
    } else {
        $(this).css("background-color", "#ccc");
    }
    i++;
});

or the less readable but shorter version:

var i = 1;
$('#wrapper > div').each(function() {
    if (i % 2 == (Math.ceil(i / 4) % 2 == 0) ? 0 : 1) $(this).css("background-color", "#000");
    else $(this).css("background-color", "#ccc");
    i++;
});

essentially you change the test for the alternate cell every row.

Issues with Drag and Drop of unicode in Javascript

See this fiddle showing the main problem and some others fixed.

OK, the immediate problem - receiving an error when you dropped on a piece's starting position is that you were looking up the element by the td id name prefixed with S which happens to be the same as the span that you are dragging around:

if (tdid.length < 3) {
     spanid = 'S' + tdid; //id of span by concatenating "S" to tdid
}

For example,

<td id="A0"...

contains span

<span id="SA0"

Note that S + A0 will always equal SA0 which is the ID of the span (piece) that you are dragging around.

There were a few other issues that I fixed:

All table cells, even ones that didn't have a piece had a draggable span. This caused some conflicts and errors when dragging around as it was removed after a drag which caused problems with the logic in the code when a piece was dragged back to where it had visited.
The item can be dropped on a td or another piece span, you need to handle both.
You lose the pointer icon after moving because it is no longer a link (a). So, I added the cursor:pointer css.

The main changes to the logic were in function drop(ev) {, specifically the code to handle drops to different locations and to get the inner span:

     tdid = ev.target.id; //td id of the target
     //if (tdid.length < 3) {
       //  spanid = 'S' + tdid; //id of span by concatenating "S" to tdid
     //}
     //else {
      //   spanid = tdid;
     //}
     var ttd = document.getElementById(tdid);
     var tgtPieceElem;
     if( ttd.nodeName.toLowerCase()=='span')//dropped onto another piece
     {
        tgtPieceElem = ttd;
     }
     else //dropped onto table-cell
     {
        var tgtPieces = ttd.getElementsByTagName('span');
        tgtPieceElem = (tgtPieces.length==1)?tgtPieces[0]:null;
     }
     if (tgtPieceElem) {
         tgtPiece = tgtPieceElem.innerHTML; //gives code of target

and the final else to handle drop to an empty cell.

     else
     {
        ev.target.innerHTML = "";
        ev.target.appendChild(document.getElementById(src)); //append src piece into target piece
        alert(src);
     }

Besides this, I have the following recommendations: -

The links have duplicate ids for example, all pawn links have the id pawn. Ids should be unique on the page, use a class instead.
I am not sure if the links a was done because you wanted links or just to show that the elements could be clicked. If the latter, then I suggest removing the links and using the css cursor:pointer instead and css for colour styling. If you want the links, then currently the pieces are dragged without the links, so they lose them when dropped. You will need to insert the links into the new cell as well.
You probably want some class on the pieces so that you can recognize in drop that a valid piece is being dropped and exit the function if not. Currently you can drop an image or any other draggable element which causes an error in the code.
As others have mentioned, it is best to keep game logic separate from presentation. However, most of the errors were related to presentation, so you will need to do both (fix presentation errors and separate logic).

Pure CSS Chessboard with Div & No Classes or Ids, Is It Possible