title: Add a nth-child style programmatically
body: <p>I want to follow the pattern set out in <a href="http://blog.stevensanderson.com/2013/03/15/animating-lists-with-css-3-transitions/" rel="nofollow noreferrer">this blog</a> which uses the following css rules to specify where the items should appear:</p>
  
  <pre><code>.items li { 
    position: absolute; top: 0; left: 0;
  }
  .items li:nth-child(1)  { transform: translate3d(0, 0%, 0); }
  .items li:nth-child(2)  { transform: translate3d(0, 100%, 0); }
  .items li:nth-child(3)  { transform: translate3d(0, 200%, 0); }
  </code></pre>
  
  <p>However, I don't know how many items will be in the list so I'd rather not hard-code in say 30 lines like the above and be limited to 30 list items.  Instead, I'd like to add a style rule every time an item is added, which means I can have an unlimited number of list items.</p>
  
  <p>I've tried various approaches but can't figure out how to programmatically add such style rules dynamically.  Any help would be much appreciated.  I'm writing the app in Dart but a Javascript solution would be equally welcome.</p>
  
  <p><strong>Update</strong></p>
  
  <p>See below for the accepted answer that got me on the right track. It uses jquery so I've included below a version for anyone like me who is using Dart.  The Dart version uses <a href="https://stackoverflow.com/questions/23524190/how-do-i-dynamically-add-a-stylesheet-using-dart">How do I dynamically add a stylesheet using Dart?</a> which I've just found - I don't know how I missed it earlier.  Thanks all for helping.</p>
  
  <pre><code>import 'dart:html' as Html;
  void main(){
    Html.StyleElement styleElement = new Html.StyleElement();
    Html.document.head.append(styleElement);
    Html.CssStyleSheet sheet = styleElement.sheet;
    final rule = 'div { border: 1px solid red; }';
    sheet.insertRule(rule, 0);
  }
  </code></pre>