Search code examples
compass-sasssass

How to override properties for the last-child of an element

I have several section elements on a page i build. For the vertical structuring i apply vertical rhythm. Now i want to accomplish that all sections have a rhythm of 0,0,3,2 while the last one should get more or less a reset rhythm wise. 

section{    
    @include rhythm(0,0,3,2);
    &:last-child{
        @include rhythm(0,0,0,0);
    }
}

Probably a basic issue but somehow 0,0,3,2 gets applied to the last section also instead of leaving the rhythm completely out for the last one. Thanks!

Solution

  • Use the :not() selector:

    section {
    &:not(:last-child) {
        @include rhythm(0,0,3,2);
    }

    &:last-child{
        @include rhythm(0,0,0,0);
    }
}