CSS nth-child trick: get the first/last half of elements

nth-child is a common way to style a specific element. For example 2n+1 is for all odd elements, and 2n is for all even ones.

But how to choose the first/last half of elements without any JavaScript? One of my projects had this wired situation, and I prefer to not use any JavaScript codes.

Negative child range and nth-last-child

:nth-child(n+2) means all elements without the first one.
:nth-child(-n+2) means all elements without the last and the second ones.
nth-last-child(n+2) will select elements from the second last one to the first one.
nth-last-child(-n+2) will select elements from the second last one to the last one.

Last half of elements

According the example image, let's assume there are 4 elements -

half or more elements

:nth-child(n+2):nth-last-child(-n+2)

half or less elements

nth-child(n+3):nth-last-child(-n+2)

last half or more elements, top to 12

first-child:last-child,
nth-child(n+2):nth-last-child(-n+2),
nth-child(n+3):nth-last-child(-n+3),
nth-child(n+4):nth-last-child(-n+4),
nth-child(n+5):nth-last-child(-n+5),
nth-child(n+6):nth-last-child(-n+6)

Converts it to SCSS

What if there are 100 elements? You have to write 50 lines in CSS...
But we can make a @mixin, then add a max number.

@mixin last-half-of-nth($maxNumber){
  &:first-child:last-child{
      color: white;
      background: darkblue;
  }
    @for $n from 2 through $maxNumber{
        &:nth-child(n+#{$n}):nth-last-child(-n+#{$n}){
            color: white;
            background: darkblue;
        }
    }
}

last half or more, top to 100

 @include last-half-of-nth(50);

Limitation

You have to know the max number of the elements, otherwise it won't work. But this trick is still good for pure CSS without any JavaScript codes.

Preferences

https://stackoverflow.com/questions/15466898/selecting-half-the-elements-with-nth-child