Reputation: 37
<div>
<div>A</div>
<div>B</div>
<div>C</div>
</div>
<div>
<div>A</div>
<div>B</div>
<div>C</div>
</div>
A should be colored red, B should be colored green and C should be colored blue. Now I can easily fix this if I use a class or ID, but what if for some reason I don't want to use a single class/id? I know it's possible, but can't figure it out for the life of it.
I probably have to use something with child selectors, but it keeps not working out properly and I'm close to having tried out all possible combinations.
Upvotes: 1
Views: 61
Reputation: 9738
nth-child
is the solution for that
this will allow you to select element according to their position to their parent
div div:nth-child(1){
color:red;
}
div div:nth-child(2){
color:green;
}
div div:nth-child(3){
color:blue;
}
<div>
<div>A</div>
<div>B</div>
<div>C</div>
</div>
<div>
<div>A</div>
<div>B</div>
<div>C</div>
</div>
Upvotes: 1