Except

Type: Mixin

@include except();

* You can call mixins with or without gls- namespace (e.g. @include gls-except();).

Except Sass mixin helps you to target elements that you do not want to apply style changes to that you want for other elements in the list.

You can pass a string value to target elements by their id, class and pseudo-class selector. Or you can pass a number (or multiple numbers seperated by comma) to get the items based on their index position in the list.

Github Source Code

Arguments

Name	Type	Description
`–`	`string`	The pseudo-class, class or id selectors. Accepts `first`, `last`, `odd`, `even` and class or id selectors.
`–`	`number`	The index number of the element(s) in the list. It is also possible to make multiple selections.

* Important: Passing multiple arguments is only for numeric values and the values must be comma-separated.

Examples

Let’s say you have a list of items wrapped by a container. Just like the example below. Now, you want to apply some style changes to all of them, however, except for one or more …

<div class="list-wrapper">
  <div class="list-item">01</div>
  <div class="list-item">02</div>
  <div class="list-item">03</div>
  <div class="list-item">04</div>
  <div class="list-item">05</div>
  <div class="list-item">06</div>
</div>

Let’s exclude the first one!

.list-wrapper{
  .list-item{
    @include except(first){
      background-color: #5bc0bb;
      color: white;
    }
  }
}

//CSS Output
.list-wrapper .list-item:not(:first-of-type) {
  background-color: #5bc0bb;
  color: white;
}

Now, let’s try to exclude the last item in the list.

.list-wrapper{
  .list-item{
    @include except(last){
      background-color: #5bc0bb;
      color: white;
    }
  }
}

//CSS Output
.list-wrapper .list-item:not(:last-of-type) {
  background-color: #5bc0bb;
  color: white;
}

Now, let’s exclude the third item in the list.

.list-wrapper{
  .list-item{
    @include except(3){
      background-color: #5bc0bb;
      color: white;
    }
  }
}

//CSS Output
.list-wrapper .list-item:not(:nth-of-type(3)) {
  background-color: #5bc0bb;
  color: white;
}

Let’s exclude those elements whose numeric position is even (e.g. 2, 4, 6, …).

.list-wrapper{
  .list-item{
    @include except(even){
      background-color: #5bc0bb;
      color: white;
    }
  }
}

//CSS Output
.list-wrapper .list-item:not(:nth-of-type(even)) {
  background-color: #5bc0bb;
  color: white;
}

Now, let’s try something really fancy and exclude multiple items!

Remember that when you target multiple items in the list, the arguments you pass must be numbers and separated by comma.

.list-wrapper{
  .list-item{
    @include except(1, 4, 5){
      background-color: #5bc0bb;
      color: white;
    }
  }
}

//CSS Output
.list-wrapper .list-item:not(:nth-of-type(1)):not(:nth-of-type(4)):not(:nth-of-type(5)) {
  background-color: #5bc0bb;
  color: white;
}

Let’s exclude the items with class exclude on them.

When you pass arguments for id or class attributes of the items, don’t forget to wrap your arguments with quotation.

<div class="list-wrapper">
  <div class="list-item exclude">01</div>
  <div class="list-item">02</div>
  <div class="list-item">03</div>
  <div class="list-item">04</div>
  <div class="list-item">05</div>
  <div class="list-item exclude">06</div>
</div>

.list-wrapper{
  .list-item{
    @include except(".exclude"){
      background-color: #5bc0bb;
      color: white;
    }
  }
}

//CSS Output
.list-wrapper .list-item:not(.exclude) {
  background-color: #5bc0bb;
  color: white;
}

Now suppose you don’t know the number of the items that will appear in the list, and that you want to exclude the second item from the very end. How can you achieve that? It’s easy!

Information: You can pass negative values to exclude elements based on their position among a group of siblings, counting from the end.

.list-wrapper{
  .list-item{
    @include except(-2){
      background-color: #5bc0bb;
      color: white;
    }
  }
}

//CSS Output
.list-wrapper .list-item:not(:nth-last-of-type(2)) {
  background-color: #5bc0bb;
  color: white;
}

Now let’s pass multiple negative values.

.list-wrapper {
  .list-item {
    @include except(-2, -4) {
      background-color: #5bc0bb;
      color: white;
    }
  }
}

//CSS Output
.list-wrapper .list-item:not(:nth-last-of-type(2)):not(:nth-last-of-type(4)) {
  background-color: #5bc0bb;
  color: white;
}

Now let’s pass the positive and negative values together.

.list-wrapper {
  .list-item {
    @include except(1, -1, -2) {
      background-color: #5bc0bb;
      color: white;
    }
  }
}

//CSS Output
.list-wrapper .list-item:not(:nth-of-type(1)):not(:nth-last-of-type(1)):not(:nth-last-of-type(2)) {
  background-color: #5bc0bb;
  color: white;
}