How to select all <div> inside a class-CodePudding

So I wish to create multiple boxes in a class, with the same background color. I have created around 6 boxes in the class color-board, however when I try to select it. It just only display 1 box...

Here is my code for the class and how I select the div:

.color-board{
    background-color: rgba(131, 131, 131, 0.4000000059604645);
    padding: 5px;
    width: 100px;
    height: fit-content;
}

div .color-board {
    width: 30px;
    height: 30px;
    border: 1px black solid;
    border-radius: 1em;
    background-color: white;
}

and here is how I add the boxes on the HTML file:

<div class="color-board">
                <div></div>
                <div></div>
                <div></div>

                <div></div>
                <div></div>
                <div></div>
            </div>

When I use this code only one box appears, not 6 boxes. It feels like I only add 1 div in the class, why can't 6 of them?

CodePudding user response：

.color-board{
    background-color: rgba(131, 131, 131, 0.4000000059604645);
    padding: 5px;
    width: 100px;
    height: fit-content;
}

.color-board div {
    width: 30px;
    height: 30px;
    border: 1px black solid;
    border-radius: 1em;
    background-color: white;
}

<div class="color-board">
                <div></div>
                <div></div>
                <div></div>

                <div></div>
                <div></div>
                <div></div>
            </div>