Styling children based on their number with CSS3

http://leaverou.me/2011/01/styling-children-based-on-their-number-with-css3

by Brandon

HTML

<ul>
    <li>1</li>
</ul>

<ul>
    <li>1</li>
    <li>2</li>
</ul>

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ul>

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
</ul>

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
</ul>

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
</ul>

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
</ul>

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
    <li>11</li>
</ul>

<ul>
    <li>x</li>
    <li>x</li>
    <li>x</li>
    <li>x</li>
    <li>x</li>
    <li>x</li>
    <li>x</li>
    <li>x</li>
    <li>x</li>
    <li>x</li>
    <li>x</li>
    <li>x</li>
    <li>x</li>
    <li>x</li>
    <li>x</li>
    <li>x</li>
    <li>x</li>
    <li>x</li>
    <li>x</li>
    <li>x</li>
    <li>x</li>
    <li>x</li>
    <li>x</li>
    <li>x</li>
    <li>x</li>
    <li>x</li>
    <li>x</li>
    <li>x</li>
    <li>x</li>
    <li>x</li>
    <li>x</li>
    <li>x</li>
    <li>x</li>
    <li>x</li>
    <li>x</li>
    <li>x</li>
    <li>x</li>
    <li>x</li>
    <li>x</li>
    <li>x</li>
    <li>x</li>
    <li>x</li>
    <li>x</li>
    <li>x</li>
    <li>x</li>
    <li>x</li>
    <li>x</li>
    <li>x</li>
    <li>x</li>
    <li>x</li>
    <li>x</li>
    <li>x</li>
    <li>x</li>
    <li>x</li>
    <li>x</li>
    <li>x</li>
    <li>x</li>
   ...

SCSS

ul {
    color: #fff;
    padding:10px 1px;
    overflow:hidden;
    
    @for $i from 1 through 13 {
        &:nth-child(#{$i}) {
            li {
                background-color: #{adjust-hue(#0c0, ($i * 24deg))};
            }
        }
    }
}

li {
    float:left;
    outline:1px solid gray;
    text-align:center;
    line-height:2;
    
    &:only-child {
        width: 100%;
    }
    
    @for $i from 2 through 100 {
        &:first-child {
            &:nth-last-child(#{$i}),
            &:nth-last-child(#{$i}) ~ li {
                width: #{100 / $i}%;
            }
        }
    }
}