How `nth-child` works

How `nth-child` works
	3	3n	3n+1	-n+3	n+4
0	3	0	1	3	4
1	3	3	4	2	5
2	3	6	7	1	6
3	3	9	10	0	7
4	3	12	13	-1	8
…
100	3	300	301	-97	104

:nth-child(3){…}    // the third child
:nth-child(3n){…}   // every third child
:nth-child(3n+1){…} // every third child, with offset
:nth-child(-n+3){…} // the first three children
:nth-child(n+4){…}  // all except first three children

Some basic nth-child recipes

Creating Quantity Queries

li:nth-last-child(-n+8){ // the last eight children
  background: red;
}

li:nth-last-child(-n+8){ // the last eight children
  background: red;
}

li:first-child{ // the first child
  background: green;
}

li:nth-last-child(-n+8){ // the last eight children
  background: red;
}

li:first-child{ // the first child
  background: green;
}

li:nth-last-child(-n+8):first-child{ // first of at most eight
  background:blue;
}

li:nth-last-child(-n+8):first-child, // first of at most eight
li:nth-last-child(-n+8):first-child ~ li{  // or a sibling 
  background:blue;
}

li:nth-last-child(n+6):first-child, // first of at least six
li:nth-last-child(n+6):first-child ~ li{  // or a sibling 
  background:blue;
}

li:nth-last-child(even):first-child, // first of even
li:nth-last-child(even):first-child ~ li{  // or a sibling 
  background:blue;
}

Abstracting Into Sass

@mixin has-nth($expression, $element: '*') {
  &:nth-last-child(#{$expression}):first-child,
  &:nth-last-child(#{$expression}):first-child ~ #{$element} {
    @content;
  }
}

A generic Sass mixin for selecting by quantity

Any valid :nth-child expression can be passed to the has-nth() mixin.

li {
  @include has-nth('3n', 'li') {
    border-radius: 0;
  }
}

@mixin at-least($quantity, $element: '*') {
  @include has-nth('n + #{$quantity}', $element) {
    @content;
  }
}

An at-least Sass mixin, an abstraction of has-nth for readability.

@include at-least(6) {
  background: $blue;
}

@mixin at-most($quantity, $element: '*') {
  @include has-nth('-n + #{$quantity}', $element) {
    @content;
  }
}

An at-most Sass mixin

@include at-most(8) {
  background: $blue;
}

Some Other Possible Mixins:

divisible-by
has-exactly
has-even
has-odd

Use Cases

Gotchas & Considerations

Can only count either nth-child or nth-of-type
Does not account for hidden elements
Styling can't affect parent elements (i.e., the ul can't be styled based on the number of li elements.
Works best with elements with predictable siblings, such as tr and li

Questions?

https://sassquantity.slides.rocks

Quantity Selectors in Sass

ATX Sass | September 21^st, 2017