Home / Questions / 53527
Accepted
Jose Hermosilla Rodrigo
Asked: 2020-03-07 14:01:00 +0800 CST 2020-03-07 14:01:00 +0800 CST

Progressively change the opacity of divs using CSS

  • 772

I am looking for a purely CSS solution to the following problem.

I have a div that contains an indeterminate number of divs, I am looking for a given RGB color, for example, (0,0,0)and a range of opacity values ​​to (0.3 - 0.7)vary the opacity of the divs in that range progressively.

At the moment I have the following. Using the selectors first-childand last-child: 

.container {
  background : #f7f7f7;
  padding : 10px;
}

.container div {
  height : 30px;
  margin : 5px;
  background : rgba(0, 0, 0, .5);
}

.container div:first-child {
  background : rgba(0, 0, 0, .3);
}

.container div:last-child {
  background : rgba(0, 0, 0, .7);
}
<div class="container">
  <div>aaa</div>
  <div>aaa</div>
  <div>aaa</div>
  <div>aaa</div>
  <div>aaa</div>
  <div>aaa</div>
</div>

Is it possible using only CSS?

css

3 Answers

  1. Best Answer

    CSS works with selectors, it is impossible to do calculations or iterations, the closest thing would be to use 'nth-child' to refer to a child of an element.

    .container div:nth-child(1) { background : rgba(0, 0, 0, .1); };
.container div:nth-child(2) { background : rgba(0, 0, 0, .2); };
.container div:nth-child(3) { background : rgba(0, 0, 0, .3); };

    But in this way you must statically specify the opacity value, not randomly, if the children of the container element contain more children in turn, these will be affected, so that it only applies to the immediately lower children then

    .container > div:nth-child(1) { background : rgba(0, 0, 0, .1); };
.container > div:nth-child(2) { background : rgba(0, 0, 0, .2); };
.container > div:nth-child(3) { background : rgba(0, 0, 0, .3); };

    to get what you want you must necessarily use Javascript to give the opacity a random value and additionally to use a loop where you assign the opacity to 'n' number of children.

    With SASS or LESS you can use iterators but in the end this generates CSS so you're restricted to the number of iterations you specify in the preprocessor so you'll end up with the same thing.

    • 3

  2. With a certain number it can be done, exceeding the number the color is maintained. a clear example is a breadcrumb:

        .breadcrumb li:nth-child(2) a       { background:        hsla(207,24%,35%,1); }
    .breadcrumb li:nth-child(2) a:after { border-left-color: hsla(207,24%,35%,1); }
    .breadcrumb li:nth-child(3) a       { background:        hsla(207,24%,40%,1); }
    .breadcrumb li:nth-child(3) a:after { border-left-color: hsla(207,24%,40%,1); }
    .breadcrumb li:nth-child(4) a       { background:        hsla(207,24%,45%,1); }
    .breadcrumb li:nth-child(4) a:after { border-left-color: hsla(207,24%,45%,1); }
    .breadcrumb li:nth-child(5) a       { background:        hsla(207,24%,50%,1); }
    .breadcrumb li:nth-child(5) a:after { border-left-color: hsla(207,24%,50%,1); }
    .breadcrumb li:last-child a {
      background: hsla(207,24%,80%,1) !important;
      color: black;
      pointer-events: none;
      cursor: default;
    }

    The key is to speculate the amount of element that we are going to use, in your example we could insert this code:

    .container div:nth-child(2) { background:rgba(0, 0, 0, .4); }
.container div:nth-child(3) { background:rgba(0, 0, 0, .5); }
.container div:nth-child(4) { background:rgba(0, 0, 0, .6); }
    • 2

  3. Using the directive @forin Sass you can achieve this by CSS(preprocessing):

    @for $i from 1 through 4 {  

  div:nth-child(#{$i})  {

    opacity: calc(.2 * #{$i});
  } 
}

    See an example

    • 1