Styling children based on their number with CSS3

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

by phsiao2000

HTML

<ul>
    <li>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</li>
</ul>

<ul>
    <li>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</li>
    <li>2</li>
</ul>

<ul>
    <li>1</li>
    <li>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</li>
    <li>3</li>
</ul>

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</li>
</ul>

CSS

*  { box-sizing: border-box;
}
body {
    background-color: lightgreen;
}
ul {
    padding:10px 1px;
    overflow:hidden;
}

li {
    padding: 1em;
    float:left;
    outline:0px solid gray;
    text-align:center;
    line-height:1.4;
    box-shadow:  inset 0px 0px 0px 4px lightgreen, inset 0px 0px 0px 7px black;
}

/* one item */
li:first-child:nth-last-child(1) {
    width: 100%;
    background-color:white;

}

/* two items */
li:first-child:nth-last-child(2),
li:first-child:nth-last-child(2) ~ li {
    width: 50%;
    background-color:white;
}

/* three items */
li:first-child:nth-last-child(3),
li:first-child:nth-last-child(3) ~ li {
    width: 33.3333%;
    background-color:lightblue;
}

/* four items */
li:first-child:nth-last-child(4),
li:first-child:nth-last-child(4) ~ li {
    width: 25%;
    background-color:pink;
    font-size: .8em;
}