CODEWITHSUNDEEP
css
Kokodoko
Kokodoko

Reputation: 28128

CSS auto increment value

I need my divs to automatically fade out depending on the number of divs. This CSS works but is there a cleaner automatic way to decrease the value by 0.1 for every next div? Regardless of the number of divs?

This example only works for the divs that I specify. 

div:nth-of-type(2) {
  opacity:0.9
}
div:nth-of-type(3) {
  opacity:0.8
}
div:nth-of-type(4) {
  opacity:0.7
}
div:nth-of-type(5) {
  opacity:0.6
}
div:nth-of-type(6) {
  opacity:0.5
}

I need something like

div:nth-child {
   opacity: n * 0.1
}

If I use SCSS or LESS variables, it still only works for a fixed number of divs.

Upvotes: 0

Views: 532

Answers (1)

Shashank Shekhar
Shashank Shekhar

Reputation: 176

If you want to use js

 var div = document.getElementById("id").children();

  for(x=0; x<div.length; x++) {
     div[x].style.opacity = (10-x)/10;
   }

This will work

Upvotes: 1

Related Questions