Nth-child Sass Mixins

2nd July 2016 in Sass

In this tutorial we're going to investigate some quick Sass mixins that can make working with nth-child that little bit easier.

The CSS nth-child selector allows you to select a group of elements with the same selectors. This is most commonly used to select the odd or even elements in a group of elements with the same selectors.

The most common use for this is styling a table as zebra style table rows, where each row is alternatively coloured.

First Child

Using the CSS selector :first-of-type you can select the first element of the selector.

@mixin first-child() {
  &:first-of-type {
    @content
  }
}

li
{
  @include first-child()
  {
    background: red;
  }
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

Last Child

Similar to the :first-of-type you can also use the :last-of-type selector to get the last element of the group.

@mixin last-child() {
  &:last-of-type {
    @content
  }
}

li
{
  @include last-child()
  {
    background: red;
  }
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

Evens

To create the standard zebra tables look you can use the nth-child selector passing in even as the parameter, this will select all even elements in the list of selected elements. Using the below mixin we can create a nice way of highlighting all even elements in the group.

@mixin even(){
  &:nth-child(even) {
    @content
  }
}

li
{
  @include evens()
  {
    background: red;
  }
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

Odds

Similar to the evens nth-child selector you can use odd to select the odd elements in the group.

@mixin odd(){
  &:nth-child(odd) {
    @content
  }
}

li
{
  @include odd()
  {
    background: red;
  }
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

Select The First nth Elements

If you want to select the first nth number of elements you can use the following mixin, this will take a parameter of how many elements you want to select. If you pass in 1 if will just use the first-child selector, if you pass in any other number then it uses nth-child selector to get the first nth elements.

@mixin first($num) {

  @if $num == 1 {
    &:first-child {
      @content;
    }
  }

  @else {
    &:nth-child(-n + #{$num}) {
      @content;
    }
  }
}

li
{
  @include first(4)
  {
    background: red;
  }
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

Select The Last nth Elements

Similar to the first nth selector you can do the opposite and select the last nth elements.

@mixin last($num) {
   &:nth-last-child(-n + #{$num}) {
    @content;
  }
}

li
{
  @include last(4)
  {
    background: red;
  }
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

Select After nth Elements

The following mixin will allow you to select all elements after a certain number, for this example we're passing in the number 4 which means the mixin will highlight elements 5-10.

@mixin after($num) {
  &:nth-child(n+#{$num + 1}) {
    @content
   }
}

li
{
  @include after(4)
  {
    background: red;
  }
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

Select From Last Elements

Using this mixin you are able to select a certain element from the end of the group of elements, for this example we're passing in the number 4 again and the mixin will select the 4th element from the end being number 7.

@mixin from-end($num) {
  &:nth-last-child(#{$num}) {
   @content
  }
}

li
{
  @include from-end(4)
  {
    background: red;
  }
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

Select Between Two Elements

If you want to select the elements between 2 numbers then you can use the following mixin and pass in the start number and the end number.

@mixin between($first,$last) {
  &:nth-child(n+#{$first}):nth-child(-n+#{$last}) {
    @content
  }
}

li
{
  @include between(1, 4)
  {
    background: red;
  }
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

Select All But One

To select all the elements excluding one use the following mixin, just pass in the number you want to exclude and all will be highlighted apart from this number.

@mixin all-but($num) {
  &:not(:nth-child(#{$num})) {
    @content
  }
}

li
{
  @include all-but(4)
  {
    background: red;
  }
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

Select Every nth

Or you can use nth-child the way it was designed for by selecting every nth element by passing in a number, in this example we're passing in 3 which will highlight elements 3, 6 and 9.

@mixin each($num) {
  &:nth-child(#{$num}n) {
    @content
  }
}

li
{
  @include each(3)
  {
    background: red;
  }
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

For more mixins visit https://lukyvj.github.io/family.scss/