You need to use :nth-of-type(n) selector.
// For First Right Class Div
#container .right:nth-of-type(1) {
}
// For First Left Class Div
#container .left:nth-of-type(1) {
}
Hence for every div you need to change n value.
Your question is extremely unclear but I want to help you out anyhow. I assume you want to style each div inside the container individually, rather than styling all of “.left” and “.right”.
To do this, you can add multiple classes to each div;
.right {
color: red;
}
.left {
color: blue;
}
.r1,
.l3{
color: green;
}<div id='container'>
<div class="right r1">r1</div>
<div class="right r2">r2</div>
<div class="right r3">r3</div>
<div class="right r4">r4</div>
<div class="left l1">l1</div>
<div class="left l2">l2</div>
<div class="left l3">l3</div>
<div class="left l4">l4</div>
</div>In the example above I have changed the class in, for example, the xth ‘left’ to ‘left lx’. We can then individually style the divs.
You could also use the “:nth-child” selector, as seen below:
.right {
color: red;
}
.left {
color: blue;
}
#container div:nth-child(7),
#container div:nth-child(1) {
color: green;
}<div id='container'>
<div class="right">r1</div>
<div class="right">r2</div>
<div class="right">r3</div>
<div class="right">r4</div>
<div class="left">l1</div>
<div class="left">l2</div>
<div class="left">l3</div>
<div class="left">l4</div>
</div>Hope this helps!