Basic

Description: The elements Object groups element instances together in which each child Object is treated as a separate element instance. If the key property is not defined in the element instance, its Object key is used as the <identifier>.

Edit
ctr('.test', {
width: 200px
elements: {
before: {
content: 'Yusuke Urameshi'
font-size: 1em
}
after: {
content: 'Hiei'
font-size: 2em
}
last-of-type: {
font-size: 3em
}
yuyuHakusho: {
option: {
// will be key
key: "nth-of-type(2)"
}
font-size: 4em
}
}
})
.test:
width: 200px
elements:
before:
content: [Yusuke, Urameshi]
font-size: 1em
after:
content: Hiei
font-size: 2em
last-of-type:
font-size: 3em
yuyuHakusho:
option:
# will be key
key: "nth-of-type(2)"
font-size: 4em
.test {
width: 200px;
}
.test::before {
font-size: 1em;
content: "Yusuke Urameshi";
}
.test::after {
font-size: 2em;
content: "Hiei";
}
.test:last-of-type {
font-size: 3em;
}
.test:nth-of-type(2) {
font-size: 4em;
}
ctr('.test', {
  width: 200px
  elements: {
    before: {
      content: 'Yusuke Urameshi'
      font-size: 1em
    }
    after: {
      content: 'Hiei'
      font-size: 2em
    }
    last-of-type: {
      font-size: 3em
    }
    yuyuHakusho: {
      option: {
        // will be key
        key: "nth-of-type(2)"
      }
      font-size: 4em
    }
  }
})
.test {
  width: 200px;
}
.test::before {
  font-size: 1em;
  content: "Yusuke Urameshi";
}
.test::after {
  font-size: 2em;
  content: "Hiei";
}
.test:last-of-type {
  font-size: 3em;
}
.test:nth-of-type(2) {
  font-size: 4em;
}
.test:
  width: 200px
  elements:
    before:
      content: [Yusuke, Urameshi]
      font-size: 1em
    after:
      content: Hiei
      font-size: 2em
    last-of-type:
      font-size: 3em
    yuyuHakusho:
      option:
        # will be key
        key: "nth-of-type(2)"
      font-size: 4em

Notes

Common Key

Description: A common Object can be defined in the elements Object to specify common values used by all element instances.

Edit
ctr('.test', {
width: 200px
elements: {
// merged into each element
common: {
font-size: 1em
}
first-child: {
color: red
}
last-child: {
color: blue
}
darkTournament: {
option: {
// will be key
key: 'nth-child(2)'
}
color: black
}
}
})
.test:
width: 200px
elements:
# merged into each element
common:
font-size: 1em
first-child:
color: red
last-child:
color: blue
darkTournament:
option:
# will be key
key: nth-child(2)
color: black
.test {
width: 200px;
}
.test:first-child {
color: #f00;
font-size: 1em;
}
.test:last-child {
color: #00f;
font-size: 1em;
}
.test:nth-child(2) {
color: #000;
font-size: 1em;
}
ctr('.test', {
  width: 200px
  elements: {
    // merged into each element
    common: {
      font-size: 1em
    }
    first-child: {
      color: red
    }
    last-child: {
      color: blue
    }
    darkTournament: {
      option: {
        // will be key
        key: 'nth-child(2)'
      }
      color: black
    }
  }
})
.test {
  width: 200px;
}
.test:first-child {
  color: #f00;
  font-size: 1em;
}
.test:last-child {
  color: #00f;
  font-size: 1em;
}
.test:nth-child(2) {
  color: #000;
  font-size: 1em;
}
.test:
  width: 200px
  elements:
    # merged into each element
    common:
      font-size: 1em
    first-child:
      color: red
    last-child:
      color: blue
    darkTournament:
      option:
        # will be key
        key: nth-child(2)
      color: black

Notes

Omit

Description: A List value for the omit option property in an Object element instance omits specific common values from being merged into the instance. The omit value is defined by the property path relative to the common Object.

Edit
ctr('.test', {
width: 200px
elements: {
common: {
content: false
position: absolute
top: 0
}
before: {
size: 100px
}
after: {
option: {
// omits top
omit: 'top'
}
size: 100px
bottom: 0
}
}
})
.test:
width: 200px
elements:
common:
content: false
position: absolute
top: 0
before:
size: 100px
after:
option:
# omits top
omit: top
size: 100px
bottom: 0
.test {
width: 200px;
}
.test::before {
top: 0;
width: 100px;
content: "";
height: 100px;
position: absolute;
}
.test::after {
bottom: 0;
width: 100px;
content: "";
height: 100px;
position: absolute;
}
ctr('.test', {
  width: 200px
  elements: {
    common: {
      content: false
      position: absolute
      top: 0
    }
    before: {
      size: 100px
    }
    after: {
      option: {
        // omits top
        omit: 'top'
      }
      size: 100px
      bottom: 0
    }
  }
})
.test {
  width: 200px;
}
.test::before {
  top: 0;
  width: 100px;
  content: "";
  height: 100px;
  position: absolute;
}
.test::after {
  bottom: 0;
  width: 100px;
  content: "";
  height: 100px;
  position: absolute;
}
.test:
  width: 200px
  elements:
    common:
      content: false
      position: absolute
      top: 0
    before:
      size: 100px
    after:
      option:
        # omits top
        omit: top
      size: 100px
      bottom: 0

Notes

Pick

Description: A List value for the pick option property in an Object element instance picks specific common values to be merged into the instance. The pick value is defined by the property path relative to the common Object.

Edit
ctr('.test', {
width: 200px
elements: {
common: {
content: false
position: absolute
top: 0
}
before: {
size: 100px
}
after: {
option: {
// picks position + content
pick: 'position' 'content'
}
size: 100px
bottom: 0
}
}
})
.test:
width: 200px
elements:
common:
content: false
position: absolute
top: 0
before:
size: 100px
after:
option:
# picks position + content
pick: [position, content]
size: 100px
bottom: 0
.test {
width: 200px;
}
.test::before {
top: 0;
width: 100px;
content: "";
height: 100px;
position: absolute;
}
.test::after {
bottom: 0;
width: 100px;
content: "";
height: 100px;
position: absolute;
}
ctr('.test', {
  width: 200px
  elements: {
    common: {
      content: false
      position: absolute
      top: 0
    }
    before: {
      size: 100px
    }
    after: {
      option: {
        // picks position + content
        pick: 'position' 'content'
      }
      size: 100px
      bottom: 0
    }
  }
})
.test {
  width: 200px;
}
.test::before {
  top: 0;
  width: 100px;
  content: "";
  height: 100px;
  position: absolute;
}
.test::after {
  bottom: 0;
  width: 100px;
  content: "";
  height: 100px;
  position: absolute;
}
.test:
  width: 200px
  elements:
    common:
      content: false
      position: absolute
      top: 0
    before:
      size: 100px
    after:
      option:
        # picks position + content
        pick: [position, content]
      size: 100px
      bottom: 0

Notes

Target

Description: A List value for the target option property in the common Object specifies specific element instances to merge with.

Edit
ctr('.test', {
width: 200px
elements: {
common: {
option: {
// only merges with "after"
target: 'after'
}
content: false
position: absolute
top: 0
}
before: {
size: 100px
}
after: {
size: 100px
bottom: 0
}
}
})
.test:
width: 200px
elements:
common:
option:
# only merges with "after"
target: after
content: false
position: absolute
top: 0
before:
size: 100px
after:
size: 100px
bottom: 0
.test {
width: 200px;
}
.test::before {
width: 100px;
height: 100px;
}
.test::after {
top: 0;
bottom: 0;
width: 100px;
content: "";
height: 100px;
position: absolute;
}
ctr('.test', {
  width: 200px
  elements: {
    common: {
      option: {
        // only merges with "after"
        target: 'after'
      }
      content: false
      position: absolute
      top: 0
    }
    before: {
      size: 100px
    }
    after: {
      size: 100px
      bottom: 0
    }
  }
})
.test {
  width: 200px;
}
.test::before {
  width: 100px;
  height: 100px;
}
.test::after {
  top: 0;
  bottom: 0;
  width: 100px;
  content: "";
  height: 100px;
  position: absolute;
}
.test:
  width: 200px
  elements:
    common:
      option:
        # only merges with "after"
        target: after
      content: false
      position: absolute
      top: 0
    before:
      size: 100px
    after:
      size: 100px
      bottom: 0

Notes

True Value

Description: A true Boolean value for an Object element instance inherits the common Object value.

Edit
ctr('.test', {
width: 200px
elements: {
common: {
content: false
position: absolute
top: 0
}
before: {
size: 100px
}
// inherits common
after: true
}
})
.test:
width: 200px
elements:
common:
content: false
position: absolute
top: 0
before:
size: 100px
# inherits common
after: true
.test {
width: 200px;
}
.test::before {
top: 0;
width: 100px;
content: "";
height: 100px;
position: absolute;
}
.test::after {
top: 0;
content: "";
position: absolute;
}
ctr('.test', {
  width: 200px
  elements: {
    common: {
      content: false
      position: absolute
      top: 0
    }
    before: {
      size: 100px
    }
    // inherits common
    after: true
  }
})
.test {
  width: 200px;
}
.test::before {
  top: 0;
  width: 100px;
  content: "";
  height: 100px;
  position: absolute;
}
.test::after {
  top: 0;
  content: "";
  position: absolute;
}
.test:
  width: 200px
  elements:
    common:
      content: false
      position: absolute
      top: 0
    before:
      size: 100px
    # inherits common
    after: true