#2 :not(:last-of-type) and :nth-last-of-type(n+2)

Yesterday in my first article on this blog (#1 Referencing parent selectors in Sass) I included an example of how to style a bullet list with Sass and the ampersand in Sencha Touch.

Today I had to style a list again and wondered about a better way than defining a border-bottom for every list item and later set border to none for the last item.

Turns out that there is one.

$app-border-color: gray;
$app-border-radius: 5px;

ul {
    margin-top: 20px;
    border: 1px solid $app-border-color;
    border-radius: $app-border-radius;

    li {
        padding: 10px;
        list-style-type: none;

        &:not(:last-of-type) {
            border-bottom: 1px solid $app-border-color;
        }
    }
}

So besides saving one line of code (yeah), I believe that this pattern is semantically more correct.

Instead of :not(:last-of-type) we also could have used :nth-last-of-type(n+2), but the former is cleaner and more declarative.

It's also noteworthy that there exist the pseudo selectors :not(:first-of-type and :nth-of-type(n+2) as well, in case you want to exclude the first item of a type.

Also, just for the record: This is not a Sass feature but rather a CSS feature.