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

After First

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

Edit
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

All But First Last

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

Edit
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

Description: Selects all children but <num> child.

Edit
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

Between

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

Edit
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

Even Between

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

Edit
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

Description: Selects all even children.

Edit
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

Every

Description: Selects every <num> child.

Edit
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

First Last

Description: Selects the first and last child.

Edit
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 Of

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

Edit
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

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

Edit
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

From End

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

Edit
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 First Last

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

Edit
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

Last Of

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

Edit
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

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

Edit
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

Middle

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

Edit
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

N Between

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

Edit
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

Not Unique

Description: Only selects children if they are not unique.

Edit
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

Odd Between

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

Edit
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

Description: Selects all odd children.

Edit
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

Unique

Description: Only selects the child if it is unique.

Edit
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