select specific div with same css class-CodePudding

i have 6 divs with the same css class, and want to add css on each div individually, without changing the css class (because there is a lot of code that gonna break if i change the classes) and also cant add any other on top of the current one. How do i select each div individually to add different css to each one?

<div > ... </div>
<div > ... </div>
<div > ... </div>
<div > ... </div>
<div > ... </div>
<div > ... </div>

for example i want to add on the first div a position absolute with top 0, but not on the other ones, and again, i cant add any css class or change the current ones.

Also (maybe this helps) inside the div there is some code that changes over the other divs, so maybe i can select a class using the childrens? The problem with .c-transparencia-graficos__part .sample1 is that im changing te .sample1 class not the .c-tra... that im interested

There is any way?

CodePudding user response：

Here you go...

Use :nth-child() CSS selector. Read more about it here.

See the snippet below.

.c-transparencia-graficos__part:nth-child(1) {
  background-color: blue;
}

.c-transparencia-graficos__part:nth-child(2) {
  background-color: red;
}

.c-transparencia-graficos__part:nth-child(3) {
  background-color: purple;
}

.c-transparencia-graficos__part:nth-child(4) {
  background-color: yellow;
}

.c-transparencia-graficos__part:nth-child(5) {
  background-color: green;
}

.c-transparencia-graficos__part:nth-child(6) {
  background-color: brown;
}

<div > ... </div>
<div > ... </div>
<div > ... </div>
<div > ... </div>
<div > ... </div>
<div > ... </div>