title: Changing color incrementally
body: <pre class="lang-css prettyprint-override"><code>#mainbody :nth-child(1){
      border-color: #FFCC00;
  }
  #mainbody :nth-child(2) {
      border-color: #FFAA00;
  }
  #mainbody :nth-child(3) {
      border-color: #FF8800;
  }
  #mainbody :nth-child(4) {
      border-color: #FF6600;
  }
  </code></pre>
  
  <p>This is awkward, especially if you add another 20 children. Would it be possible to use something like this, feeding <code>calc()</code> the position and using it in <code>rgb()</code>?</p>
  
  <p>Is there another way of doing this? (<code>counter()</code>?)</p>
  
  <pre class="lang-css prettyprint-override"><code>#mainbody h2 {
      border-color: rgb(255, calc( 255 / ( childposition / 4 ) ) ,0);
  }
  </code></pre>
  
  <p>The following shows promise but I don't think <code>rgb()</code> accepts an internal <code>counter()</code>:</p>
  
  <pre class="lang-css prettyprint-override"><code>body {
      counter-reset: headcolors 255;
  }
  h2:after {
      counter-increment: headcolors -34;
      content: "rgb(255," counter(headcolors) ",0);";
  }
  h2 {
      counter-increment: headcolors -34;
      color: rgb(255,counter(headcolors),0);
  }
  </code></pre>