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.

Sandbox 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%;
}
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}
    }
}

Sass

comments powered by Disqus