CSS - Element Count

This code sample shows a CSS only solution to define different styles for an element based on the total number of elements. This is handy when you have dynamic list content and want to style it differently for a certain number of list items.

demo

li {
    width: 49%;
    display: inline-block;
    text-align: center;
}
/* three items */
li:first-child:nth-last-child(3),
li:first-child:nth-last-child(3) ~ li {
    width: 33%;
}

SASS Version

li {
    width: 49%;
    display: inline-block;
    text-align: center;
}
@for $i from 3 through 5 {
    li:first-child:nth-last-child(#{$i}),
    li:first-child:nth-last-child(#{$i}) ~ li {
        width: #{100%/$i}
    }
}