3

Picture of my problem:

enter image description here

I'm trying to create a chessboard using html and css and when I try to add background color to each of the div blocks that I create they come out looking like the above picture. I want a checker pattern going across the chessboard not a bunch of columns with the same color going down the board. I'm trying to use the nth-child psuedo selector in css but I don't know what kind of formula I should use to get a checkered pattern. The 2nd row should go green, gray, green, gray, etc.

I used a whole bunch of div classes to create all the different blocks and I numbered them from 1 to 64. I used a grid to create the chessboard. My pusedo selector is at the very bottom of my css code.

Here's my html:

<body>
        <div class="grid-container">
            <div class="item1"><img src="images/black_rook.png" height="65px" width="65px"></div>
            <div class="item2"><img src="images/black_knight.png" height="65px" width="65px"></div>
            <div class="item3"><img src="images/black_bishop.png" height="65px" width="65px"></div>  
            <div class="item4"><img src="images/black_queen.png" height="65px" width="65px"></div>
            <div class="item5"><img src="images/black_king.png" height="65px" width="65px"></div>
            <div class="item6"><img src="images/black_bishop.png" height="65px" width="65px"></div>
            <div class="item7"><img src="images/black_knight.png" height="65px" width="65px"></div>
            <div class="item8"><img src="images/black_rook.png" height="65px" width="65px"></div>

            <div class="item9"><img src="images/black_pawn.png" height="65px" width="65px"></div>
            <div class="item10"><img src="images/black_pawn.png" height="65px" width="65px"></div>
            <div class="item11"><img src="images/black_pawn.png" height="65px" width="65px"></div>  
            <div class="item12"><img src="images/black_pawn.png" height="65px" width="65px"></div>
            <div class="item13"><img src="images/black_pawn.png" height="65px" width="65px"></div>
            <div class="item14"><img src="images/black_pawn.png" height="65px" width="65px"></div>
            <div class="item15"><img src="images/black_pawn.png" height="65px" width="65px"></div>
            <div class="item16"><img src="images/black_pawn.png" height="65px" width="65px"></div>
        
            <div class="item17"></div>
            <div class="item18"></div>
            <div class="item19"></div>  
            <div class="item20"></div>
            <div class="item21"></div>
            <div class="item22"></div>
            <div class="item23"></div>
            <div class="item24"></div>

            <div class="item25"></div>
            <div class="item26"></div>
            <div class="item27"></div>  
            <div class="item28"></div>
            <div class="item29"></div>
            <div class="item30"></div>
            <div class="item31"></div>
            <div class="item32"></div>

            <div class="item33"></div>
            <div class="item34"></div>
            <div class="item35"></div>  
            <div class="item36"></div>
            <div class="item37"></div>
            <div class="item38"></div>
            <div class="item39"></div>
            <div class="item40"></div>

            <div class="item41"></div>
            <div class="item42"></div>
            <div class="item43"></div>  
            <div class="item44"></div>
            <div class="item45"></div>
            <div class="item46"></div>
            <div class="item47"></div>
            <div class="item48"></div>

            <div class="item49"><img src="images/white_pawn.png" height="65px" width="65px"></div>
            <div class="item50"><img src="images/white_pawn.png" height="65px" width="65px"></div>
            <div class="item51"><img src="images/white_pawn.png" height="65px" width="65px"></div>  
            <div class="item52"><img src="images/white_pawn.png" height="65px" width="65px"></div>
            <div class="item53"><img src="images/white_pawn.png" height="65px" width="65px"></div>
            <div class="item54"><img src="images/white_pawn.png" height="65px" width="65px"></div>
            <div class="item55"><img src="images/white_pawn.png" height="65px" width="65px"></div>
            <div class="item56"><img src="images/white_pawn.png" height="65px" width="65px"></div>

            <div class="item57"><img src="images/white_rook.png" height="65px" width="65px"></div>
            <div class="item58"><img src="images/white_knight.png" height="65px" width="65px"></div>
            <div class="item59"><img src="images/white_bishop.png" height="65px" width="65px"></div>  
            <div class="item60"><img src="images/white_queen.png" height="65px" width="65px"></div>
            <div class="item61"><img src="images/white king.png" height="65px" width="65px"></div>
            <div class="item62"><img src="images/white_bishop.png" height="65px" width="65px"></div>
            <div class="item63"><img src="images/white_knight.png" height="65px" width="65px"></div>
            <div class="item64"><img src="images/white_rook.png" height="65px" width="65px"></div>
        </div>
        <script src="interactive.js"></script>
    </body>

</html>

Here's my css:

body {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.grid-container {
    display: grid;
    border: 3px solid black;
    grid-auto-columns: 68px;
    grid-auto-rows: 75px;
    height: 600px;
    width: 40%;
    border-radius: 5px;
}
.grid-container > div {
    background-color: rgba(255, 255, 255, 0.8);
}

.item1 { grid-area: 1 / 1; }
.item2 { grid-area: 1 / 2; }
.item3 { grid-area: 1 / 3; }
.item4 { grid-area: 1 / 4; }
.item5 { grid-area: 1 / 5; }
.item6 { grid-area: 1 / 6; }
.item7 { grid-area: 1 / 7; }
.item8 { grid-area: 1 / 8; }
.item9   { grid-area: 2 / 1; }
.item10  { grid-area: 2 / 2; }
.item11 { grid-area: 2 / 3; }
.item12 { grid-area: 2 / 4; }
.item13 { grid-area: 2 / 5; }
.item14 { grid-area: 2 / 6; }
.item15 { grid-area: 2 / 7; }
.item16 { grid-area: 2 / 8; }
.item17 { grid-area: 3 / 1; }
.item18 { grid-area: 3 / 2; }

.grid-container div:nth-child(odd){
    background-color: gray;
}

.grid-container div:nth-child(even) {
    background-color: green;
}
Yash Chitroda
  • 645
  • 4
  • 8
  • 27
john fernado
  • 127
  • 8

2 Answers2

3

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>
HelloWorld.exe
  • 88
  • 10
Yash Chitroda
  • 645
  • 4
  • 8
  • 27
2

Not sure if this is the best solution, but this is what I would do:

HTML & CSS:

#board {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-gap: 1px;
  width: 400px
}

#board div {
  background: brown;
  height: 50px;
  width: 50px;
}

#board div:nth-child(16n+2), #board div:nth-child(16n+4),
#board div:nth-child(16n+6), #board div:nth-child(16n+8), #board div:nth-child(16n+9),
#board div:nth-child(16n+11), #board div:nth-child(16n+13), #board div:nth-child(16n+15){
  background: orange;
}
<div id="board">
  <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>

I'm not sure if there's one formula that would match this but I think this is short enough to be easy to understand and maintain.

https://jsfiddle.net/cuyj5zL8/20/

HelloWorld.exe
  • 88
  • 10
arieljuod
  • 15,460
  • 2
  • 25
  • 36