Select child elements under 2 levels from the parent div - css

Question

Am currently having a code something like below to render 9 boxes like a rubix cube
#child {
height: 30px;
width: 30px;
float: left;
margin: 1px;
background-color: rgba(235, 26, 224, 0.829);
}
#outer {
position: absolute;
}
<div id="outer">
<div id="inner">
<div id="child"></div>
<div id="child"></div>
<div id="child"></div>
</div>
<div>
<div id="child"></div>
<div id="child"></div>
<div id="child"></div>
</div>
<div>
<div id="child"></div>
<div id="child"></div>
<div id="child"></div>
</div>
</div>
Am trying to assign different colors to the 9 divs using nth-child, but the browser is considering the divs as 3 different elements and not 9, as there is an intermediate div #inner which is another parent of the #child
#child:nth-child(2) {
background-color: blue;
}
#child:nth-child(3) {
background-color: green;
}
#child:nth-child(4) {
background-color: red;
}
#child:nth-child(5) {
background-color: yellow;
}
#child:nth-child(6) {
background-color: black;
}
/* and so on for 9 divs */
Can someone help me on this to differentiate the #child divs only with CSS

Answer 1

You'll have to select the parent before selecting the children:
.inner div {
display: inline-block;
width: 100px;
height: 100px;
}
/* The first inner element, first child */
.inner:nth-child(1) :nth-child(1) {
background: black;
}
/* The first inner element, second child */
.inner:nth-child(1) :nth-child(2) {
background: red;
}
/* The first inner element, third child etc.. */
.inner:nth-child(1) :nth-child(3) {
background: blue;
}
.inner:nth-child(2) :nth-child(1) {
background: green;
}
.inner:nth-child(2) :nth-child(2) {
background: orange;
}
.inner:nth-child(2) :nth-child(3) {
background: yellow;
}
.inner:nth-child(3) :nth-child(1) {
background: pink;
}
.inner:nth-child(3) :nth-child(2) {
background: purple;
}
.inner:nth-child(3) :nth-child(3) {
background: brown;
}
<div id="outer">
<div class="inner">
<div></div>
<div></div>
<div></div>
</div>
<div class="inner">
<div></div>
<div></div>
<div></div>
</div>
<div class="inner">
<div></div>
<div></div>
<div></div>
</div>
</div>

Answer 2

Just give each child an ID and use it to assign colours
HTML IS:
<div id="outer">
<div>
<div id="child1">1</div>
<div id="child2">2</div>
<div id="child3">3</div>
</div>
<div>
<div id="child4">4</div>
<div id="child5">5</div>
<div id="child6">6</div>
</div>
<div>
<div id="child7">7</div>
<div id="child8">8</div>
<div id="child9">9</div>
</div>
</div>
CSS is:
#child1{
background-color: red;
color:red;
}
#child2{
background-color: blue;
}
#child3{
background-color: green;
}
#child4{
background-color: pink;
}
#child5{
background-color: yellow;
}
#child6{
background-color: white;
}
#child7{
background-color: black;
}
#child8{
background-color: orange;
}
#child9{
background-color: red;
}