CodePen

HTML

            
              <h1>Poor man’s nth-child</h1>
<p>Inspired by <a href="http://abouthalf.com/2011/07/06/poor-mans-nth-child-selector-for-ie-7-and-8/">http://abouthalf.com/2011/07/06/poor-mans-nth-child-selector-for-ie-7-and-8/</a></p>
<p>Just use the Sass function <code>#{nth-child(n)}</code> in your selectors to make nth-child work in IE7 and IE8</p>

<h3>li#{nth-child(3)}</h3>
<ul>
  <li>child 1</li>
  <li>child 2</li>
  <li>child 3</li>
  <li>child 4</li>
  <li>child 5</li>
</ul>

<h3>to do</h3>
<p>build in support for nth-child functoins like <code>nth-child(3n+3)</code>.</p>
            
          
!

CSS

            
              // inspired by:
// http://abouthalf.com/2011/07/06/poor-mans-nth-child-selector-for-ie-7-and-8/


// function
@function nth-child($n) {
  $nth-child: first-child;
  @for $i from 2 through $n {
    $nth-child: append($nth-child, #{"+ *"});
  }
  @return #{":"}$nth-child;
}


// call in nth-child this way instead of with :
li#{nth-child(3)} {
  color: red;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................