Search code examples
csscss-selectorspseudo-class

Adding css to first child and next child style?

I have like this markup

<div class="sprite player" style="top: 28%; left: 26%;"></div>
<div class="sprite player" style="top: 10%; left: 37%;"></div>
<div class="sprite player" style="left: 36%; top: 28%;"></div>

There is inline styling for every element, but i want to put that inside CSS, i dont want to put like new class and then add styling, this maybe can be done by pseudo class first child and then second etc.

When i got new css I need something like this

.player:first-child{
top: 28%; left: 26%;
}
.player:first-child + .player{
top: 10%; left: 37%;
}

And so on, it it possible to make it like that?

Solution

  • Try this may help you

    .player:nth-child(1){
top: 28%; left: 26%;
}
.player:nth-child(2){
top: 10%; left: 37%;
}
.player:nth-child(3){
left: 36%; top: 28%;
}