CSS Nth-child () assigns a different background color to several consecutive DIV elements

<div id= "OutSide" ><div class= "InSide" ></div><div class= "InSide" ></div><div class= "InSide" ></div><div class= "InSide" ></div><div class= "InSide" ></div><div class = "InSide" ></div><div class= "InSide" ></div><div class= "InSide" ></div><div class= "InSide" ></div></div>

If you want to give Id==outside div under the nine div assigned a different color to travel nine Gongge.

At this time Nth-child () was used.

It's written in style.

#OutSide Div:nth-child (1) {background-color:red;}
#OutSide Div:nth-child (2) {background-color:blue;}
#OutSide Div:nth-child (3) {Background-color:green;}
#OutSide Div:nth-child (4) {background-color:purple;}
#OutSide Div:nth-child (5) {Background-color:palegreen;}
#OutSide Div:nth-child (6) {background-color:palevioletred;}
#OutSide Div:nth-child (7) {Background-color:pink;}
#OutSide Div:nth-child (8) {Background-color:plum;}
#OutSide Div:nth-child (9) {background-color:mistyrose;}

Can be understood as the parent element of Id==outside, the first Div child, the second, the third Div child, and so on

CSS Nth-child () assigns a different background color to several consecutive DIV elements