CODEWITHSUNDEEP
htmlcsssass
malexanders
malexanders

Reputation: 3343

How can I apply styles from class definitions to all child divs except the last one?

I'd like to apply two class definitions to all child divs except for the last one using Sass. This is what I had in mind, but it's not working:

.all-but-last {
  :not(:last-child) {
    .border-grey-light;
    .b-border;
  }
}

<div class='all-but-last'>
    <div></div>
    <div></div>
</div>

What is the correct way to achieve this?

Upvotes: 0

Views: 63

Answers (2)

malexanders
malexanders

Reputation: 3343

.all-but-last {
  :not(:last-child) {
    .border-grey-light;
    .b-border;
  }
}

This above syntax is invalid. Here is the correction

.all-but-last {
  :not(:last-child) {
    @extend .border-grey-light;
    @extend .b-border;
  }
}

In order for this to work, you must import the file(s) that contain the class definition(s) you wish to extend. I didn't need to use & to get this to work.

Upvotes: 2

Yaser
Yaser

Reputation: 5719

If you are using a CSS preprocessor, the code you wrote is OK. However you're missing & if you are using LESS. So try this:

.all-but-last {
  &:not(:last-child) {
    .border-grey-light;
    .b-border;
  }
}

Upvotes: 0

Related Questions