Syntax¶

Description: nth-helper is defined as a set of :nth-child key helpers.

ctr('<#selector>', {
  element: {
    key: <nth:helper>
  }
})

<#selector>:
  element:
    key: <nth:helper>

<#selector>:<nth:helper> {
  <...>: <...>;
}

Notes

• Attribution: family.scss
  • You should definitely check out the site since there are interactive examples plus it’s a lovely site and worth a view
  • You should follow the creator Lucas Bonomi and check out his work, he’s a next-level CSS’er
• Three of the quantity query helpers are not supported as of right now since I did not want to spend the time monkey patchin’, but with the rewrite they will join the family
• MDN nth-child

After First¶

Description: Selects all children after the <num> child.

ctr('.test', {
  width: 200px
  element: {
    key: 'after-first(5)'
    height: 400px
  }
})

.test:
  width: 200px
  element:
    key: after-first(5)
    height: 400px

.test {
  width: 200px;
}
.test:nth-child(n+6) {
  height: 400px;
}

ctr('.test', {
  width: 200px
  element: {
    key: 'after-first(5)'
    height: 400px
  }
})

.test {
  width: 200px;
}
.test:nth-child(n+6) {
  height: 400px;
}

.test:
  width: 200px
  element:
    key: after-first(5)
    height: 400px

Notes

• after-first(<num>) alias: afterFirst(<num>) fm-after-first(<num>)
• Eval: <element>:nth-child(n+${num + 1})

All But First Last¶

Description: Selects all children between the first <num> and the last <num>.

ctr('.test', {
  width: 200px
  element: {
    key: 'all-but-first-last(2)'
    height: 400px
  }
})

.test:
  width: 200px
  element:
    key: all-but-first-last(2)
    height: 400px

.test {
  width: 200px;
}
.test:nth-child(n+2):nth-last-child(n+2) {
  height: 400px;
}

ctr('.test', {
  width: 200px
  element: {
    key: 'all-but-first-last(2)'
    height: 400px
  }
})

.test {
  width: 200px;
}
.test:nth-child(n+2):nth-last-child(n+2) {
  height: 400px;
}

.test:
  width: 200px
  element:
    key: all-but-first-last(2)
    height: 400px

Notes

• all-but-first-last(num) alias: allButFirstLast(num) fm-all-but-first-last(num)
• Eval: <element>:nth-child(n+{num}):nth-last-child(n+{num})

All But¶

Description: Selects all children but <num> child.

ctr('.test', {
  width: 200px
  element: {
    key: 'all-but(3)'
    height: 400px
  }
})

.test:
  width: 200px
  element:
    key: all-but(3)
    height: 400px

.test {
  width: 200px;
}
.test:not(:nth-child(3)) {
  height: 400px;
}

ctr('.test', {
  width: 200px
  element: {
    key: 'all-but(3)'
    height: 400px
  }
})

.test {
  width: 200px;
}
.test:not(:nth-child(3)) {
  height: 400px;
}

.test:
  width: 200px
  element:
    key: all-but(3)
    height: 400px

Notes

• all-but(<num>) alias: allBut(<num>) fm-all-but(<num>)
• Eval: <element>:not(:nth-child(${num}))

Between¶

Description: Selects all children between the <first> and <last> child.

ctr('.test', {
  width: 200px
  element: {
    key: 'between(3, 6)'
    height: 400px
  }
})

.test:
  width: 200px
  element:
    key: between(3, 6)
    height: 400px

.test {
  width: 200px;
}
.test:nth-child(n+3):nth-child(-n+6) {
  height: 400px;
}

ctr('.test', {
  width: 200px
  element: {
    key: 'between(3, 6)'
    height: 400px
  }
})

.test {
  width: 200px;
}
.test:nth-child(n+3):nth-child(-n+6) {
  height: 400px;
}

.test:
  width: 200px
  element:
    key: between(3, 6)
    height: 400px

Notes

• between(<first>, <last>) alias: fm-between(<first>, <last>)
• Eval: <element>:nth-child(n+${first}):nth-child(-n+${last})

Even Between¶

Description: Selects all even children between the <first> and <last> children.

ctr('.test', {
  width: 200px
  element: {
    key: 'even-between(3, 12)'
    height: 400px
  }
})

.test:
  width: 200px
  element:
    key: even-between(3, 12)
    height: 400px

.test {
  width: 200px;
}
.test:nth-child(even):nth-child(n+3):nth-child(-n+12) {
  height: 400px;
}

ctr('.test', {
  width: 200px
  element: {
    key: 'even-between(3, 12)'
    height: 400px
  }
})

.test {
  width: 200px;
}
.test:nth-child(even):nth-child(n+3):nth-child(-n+12) {
  height: 400px;
}

.test:
  width: 200px
  element:
    key: even-between(3, 12)
    height: 400px

Notes

• even-between(first, last) alias: evenBetween(first, last) fm-even-between(first, last)
• Eval: <element>:nth-child(even):nth-child(n+${first}):nth-child(-n+${last})

Even¶

Description: Selects all even children.

ctr('.test', {
  width: 200px
  element: {
    key: 'even()'
    height: 400px
  }
})

.test:
  width: 200px
  element:
    key: even()
    height: 400px

.test {
  width: 200px;
}
.test:nth-child(even) {
  height: 400px;
}

ctr('.test', {
  width: 200px
  element: {
    key: 'even()'
    height: 400px
  }
})

.test {
  width: 200px;
}
.test:nth-child(even) {
  height: 400px;
}

.test:
  width: 200px
  element:
    key: even()
    height: 400px

Notes

• even() alias: fm-even()
• Eval: <element>:nth-child(even)

Every¶

Description: Selects every <num> child.

ctr('.test', {
  width: 200px
  element: {
    key: 'every(3)'
    height: 400px
  }
})

.test:
  width: 200px
  element:
    key: every(3)
    height: 400px

.test {
  width: 200px;
}
.test:nth-child(3n) {
  height: 400px;
}

ctr('.test', {
  width: 200px
  element: {
    key: 'every(3)'
    height: 400px
  }
})

.test {
  width: 200px;
}
.test:nth-child(3n) {
  height: 400px;
}

.test:
  width: 200px
  element:
    key: every(3)
    height: 400px

Notes

• every(<num>) alias: each(<num>) fm-each(<num>) fm-every(<num>)
• Eval: <element>:nth-child(${num}n)

First Last¶

Description: Selects the first and last child.

ctr('.test', {
  width: 200px
  element: {
    key: 'first-last()'
    height: 400px
  }
})

.test:
  width: 200px
  element:
    key: first-last()
    height: 400px

.test {
  width: 200px;
}
.test:first-child {
  height: 400px;
}
.test:last-child {
  height: 400px;
}

ctr('.test', {
  width: 200px
  element: {
    key: 'first-last()'
    height: 400px
  }
})

.test {
  width: 200px;
}
.test:first-child {
  height: 400px;
}
.test:last-child {
  height: 400px;
}

.test:
  width: 200px
  element:
    key: first-last()
    height: 400px

Notes

• first-last() alias: firstLast() fm-first-last()
• Eval: <element>:first-child && <element>:last-child

First Of¶

Description: Selects the first child if the number of items equals the <limit>.

ctr('.test', {
  width: 200px
  element: {
    key: 'first-of(10)'
    height: 400px
  }
})

.test:
  width: 200px
  element:
    key: first-of(10)
    height: 400px

.test {
  width: 200px;
}
.test:nth-last-child(10):first-child {
  height: 400px;
}

ctr('.test', {
  width: 200px
  element: {
    key: 'first-of(10)'
    height: 400px
  }
})

.test {
  width: 200px;
}
.test:nth-last-child(10):first-child {
  height: 400px;
}

.test:
  width: 200px
  element:
    key: first-of(10)
    height: 400px

Notes

• first-of(<limit>) alias: firstOf(<limit>) fm-first-of(<limit>)
• Eval: <element>:nth-last-child(${limit}):first-child

First¶

Description: Selects all children from the first-child to <num> child.

ctr('.test', {
  width: 200px
  element: {
    key: 'first(3)'
    height: 400px
  }
})

.test:
  width: 200px
  element:
    key: first(3)
    height: 400px

.test {
  width: 200px;
}
.test:nth-child(-n+3) {
  height: 400px;
}

ctr('.test', {
  width: 200px
  element: {
    key: 'first(3)'
    height: 400px
  }
})

.test {
  width: 200px;
}
.test:nth-child(-n+3) {
  height: 400px;
}

.test:
  width: 200px
  element:
    key: first(3)
    height: 400px

Notes

• first(<num>) alias: fm-first(<num>)
• Eval: <num> === 1 ? <element>:first-child : <element>:nth-child(<num>)

From End¶

Description: Selects the <num> child from the last.

ctr('.test', {
  width: 200px
  element: {
    key: 'from-end(3)'
    height: 400px
  }
})

.test:
  width: 200px
  element:
    key: from-end(3)
    height: 400px

.test {
  width: 200px;
}
.test:nth-last-child(3) {
  height: 400px;
}

ctr('.test', {
  width: 200px
  element: {
    key: 'from-end(3)'
    height: 400px
  }
})

.test {
  width: 200px;
}
.test:nth-last-child(3) {
  height: 400px;
}

.test:
  width: 200px
  element:
    key: from-end(3)
    height: 400px

Notes

• from-end(<num>) alias: fromEnd(<num>) fm-from-end(<num>)
• Eval: <element>:nth-last-child(${num})

From First Last¶

Description: Selects the <num> child from the start and the <num> child from the last.

ctr('.test', {
  width: 200px
  element: {
    key: 'from-first-last(2)'
    height: 400px
  }
})

.test:
  width: 200px
  element:
    key: from-first-last(2)
    height: 400px

.test {
  width: 200px;
}
.test:nth-child(2) {
  height: 400px;
}
.test:nth-last-child(2) {
  height: 400px;
}

ctr('.test', {
  width: 200px
  element: {
    key: 'from-first-last(2)'
    height: 400px
  }
})

.test {
  width: 200px;
}
.test:nth-child(2) {
  height: 400px;
}
.test:nth-last-child(2) {
  height: 400px;
}

.test:
  width: 200px
  element:
    key: from-first-last(2)
    height: 400px

Notes

• from-first-last(num) alias: fromFirstLast(num) fm-from-first-last(num)
• Eval: <element>:nth-child(${num}) & <element>:nth-last-child(${num})

Last Of¶

Description: Selects the last child if the number of items equals the <limit>.

ctr('.test', {
  width: 200px
  element: {
    key: 'last-of(10)'
    height: 400px
  }
})

.test:
  width: 200px
  element:
    key: last-of(10)
    height: 400px

.test {
  width: 200px;
}
.test:nth-of-type(10):nth-last-of-type(1) {
  height: 400px;
}

ctr('.test', {
  width: 200px
  element: {
    key: 'last-of(10)'
    height: 400px
  }
})

.test {
  width: 200px;
}
.test:nth-of-type(10):nth-last-of-type(1) {
  height: 400px;
}

.test:
  width: 200px
  element:
    key: last-of(10)
    height: 400px

Notes

• last-of(<limit>) alias: lastOf(<limit>) fm-last-of(<limit>)
• Eval: <element>:nth-of-type(${limit}):nth-last-of-type(1)

Last¶

Description: Selects all children from the <num> child to the last child.

ctr('.test', {
  width: 200px
  element: {
    key: 'last(3)'
    height: 400px
  }
})

.test:
  width: 200px
  element:
    key: last(3)
    height: 400px

.test {
  width: 200px;
}
.test:nth-last-child(-n+3) {
  height: 400px;
}

ctr('.test', {
  width: 200px
  element: {
    key: 'last(3)'
    height: 400px
  }
})

.test {
  width: 200px;
}
.test:nth-last-child(-n+3) {
  height: 400px;
}

.test:
  width: 200px
  element:
    key: last(3)
    height: 400px

Notes

• last(<num>) alias: fm-last(<num>)
• Eval: <element>:nth-last-child(-n+${num})

Middle¶

Description: Selects the child in the middle of <num> items.

ctr('.test', {
  width: 200px
  element: {
    key: 'middle(11)'
    height: 400px
  }
})

.test:
  width: 200px
  element:
    key: middle(11)
    height: 400px

.test {
  width: 200px;
}
.test:nth-child(6) {
  height: 400px;
}

ctr('.test', {
  width: 200px
  element: {
    key: 'middle(11)'
    height: 400px
  }
})

.test {
  width: 200px;
}
.test:nth-child(6) {
  height: 400px;
}

.test:
  width: 200px
  element:
    key: middle(11)
    height: 400px

Notes

• middle(<num>) alias: fm-middle(<num>)
• Eval: <element>:nth-child(${Math.round(num / 2)})

N Between¶

Description: Selects all <num> children between the <first> and <last> child.

ctr('.test', {
  width: 200px
  element: {
    key: 'n-between(3, 10, 20)'
    height: 400px
  }
})

.test:
  width: 200px
  element:
    key: n-between(3, 10, 20)
    height: 400px

.test {
  width: 200px;
}
.test:nth-child(3n):nth-child(n+10):nth-child(-n+20) {
  height: 400px;
}

ctr('.test', {
  width: 200px
  element: {
    key: 'n-between(3, 10, 20)'
    height: 400px
  }
})

.test {
  width: 200px;
}
.test:nth-child(3n):nth-child(n+10):nth-child(-n+20) {
  height: 400px;
}

.test:
  width: 200px
  element:
    key: n-between(3, 10, 20)
    height: 400px

Notes

• n-between(<num>, <first>, <last>) alias: nBetween(<num>, <first>, <last>) fm-n-between(<num>, <first>, <last>)
• Eval: <element>:nth-child(${num}n):nth-child(n+${first}):nth-child(-n+${last})

Not Unique¶

Description: Only selects children if they are not unique.

ctr('.test', {
  width: 200px
  element: {
    key: 'not-unique()'
    height: 400px
  }
})

.test:
  width: 200px
  element:
    key: not-unique()
    height: 400px

.test {
  width: 200px;
}
.test:not(:only-child) {
  height: 400px;
}

ctr('.test', {
  width: 200px
  element: {
    key: 'not-unique()'
    height: 400px
  }
})

.test {
  width: 200px;
}
.test:not(:only-child) {
  height: 400px;
}

.test:
  width: 200px
  element:
    key: not-unique()
    height: 400px

Notes

• not-unique() alias: notUnique() fm-not-unique()
• Eval: <element>:not(:only-child)

Odd Between¶

Description: Selects all odd children between the <first> and <last> child.

ctr('.test', {
  width: 200px
  element: {
    key: 'odd-between(3, 13)'
    height: 400px
  }
})

.test:
  width: 200px
  element:
    key: odd-between(3, 13)
    height: 400px

.test {
  width: 200px;
}
.test:nth-child(odd):nth-child(n+3):nth-child(-n+13) {
  height: 400px;
}

ctr('.test', {
  width: 200px
  element: {
    key: 'odd-between(3, 13)'
    height: 400px
  }
})

.test {
  width: 200px;
}
.test:nth-child(odd):nth-child(n+3):nth-child(-n+13) {
  height: 400px;
}

.test:
  width: 200px
  element:
    key: odd-between(3, 13)
    height: 400px

Notes

• odd-between(<first>, <last>) alias: oddBetween(<first>, <last>) fm-odd-between(<first>, <last>)
• Eval: <element>:nth-child(odd):nth-child(n+${first}):nth-child(-n+${last})

Odd¶

Description: Selects all odd children.

ctr('.test', {
  width: 200px
  element: {
    key: 'odd()'
    height: 400px
  }
})

.test:
  width: 200px
  element:
    key: odd()
    height: 400px

.test {
  width: 200px;
}
.test:nth-child(odd) {
  height: 400px;
}

ctr('.test', {
  width: 200px
  element: {
    key: 'odd()'
    height: 400px
  }
})

.test {
  width: 200px;
}
.test:nth-child(odd) {
  height: 400px;
}

.test:
  width: 200px
  element:
    key: odd()
    height: 400px

Notes

• odd() alias: fm-odd()
• Eval: <element>:nth-child(odd)

Unique¶

Description: Only selects the child if it is unique.

ctr('.test', {
  width: 200px
  element: {
    key: 'unique()'
    height: 400px
  }
})

.test:
  width: 200px
  element:
    key: unique()
    height: 400px

.test {
  width: 200px;
}
.test:only-child {
  height: 400px;
}

ctr('.test', {
  width: 200px
  element: {
    key: 'unique()'
    height: 400px
  }
})

.test {
  width: 200px;
}
.test:only-child {
  height: 400px;
}

.test:
  width: 200px
  element:
    key: unique()
    height: 400px

Notes

• unique() alias: fm-unique()
• Eval: <element>:only-child