Basic

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

Edit
ctr('.test > div', {
width: 200px
attributes: {
'title~="test1"': {
font-size: 1em
}
'[class|="test2"]': {
font-size: 2em
}
kool: {
key: 'class^="test3"'
font-size: 3em
}
beerMe: {
key: '[class$="test4"]'
font-size: 4em
}
myName: {
key: 'class*="te"'
font-size: 5em
}
user: {
key: '[class*="artisin"]'
font-size: 6em
}
}
})
.test > div:
width: 200px
attributes:
title~="test1":
font-size: 1em
'[class|="test2"]':
font-size: 2em
kool:
key: class^="test3"
font-size: 3em
beerMe:
key: '[class$="test4"]'
font-size: 4em
myName:
key: class*="te"
font-size: 5em
user:
key: '[class*="artisin"]'
font-size: 6em
.test > div {
width: 200px;
}
.test > div[title~="test1"] {
font-size: 1em;
}
.test > div[class|="test2"] {
font-size: 2em;
}
.test > div[class^="test3"] {
font-size: 3em;
}
.test > div[class$="test4"] {
font-size: 4em;
}
.test > div[class*="te"] {
font-size: 5em;
}
.test > div[class*="artisin"] {
font-size: 6em;
}
ctr('.test > div', {
  width: 200px
  attributes: {
    'title~="test1"': {
      font-size: 1em
    }
    '[class|="test2"]': {
      font-size: 2em
    }
    kool: {
      key: 'class^="test3"'
      font-size: 3em
    }
    beerMe: {
      key: '[class$="test4"]'
      font-size: 4em
    }
    myName: {
      key: 'class*="te"'
      font-size: 5em
    }
    user: {
      key: '[class*="artisin"]'
      font-size: 6em
    }
  }
})
.test > div {
  width: 200px;
}
.test > div[title~="test1"] {
  font-size: 1em;
}
.test > div[class|="test2"] {
  font-size: 2em;
}
.test > div[class^="test3"] {
  font-size: 3em;
}
.test > div[class$="test4"] {
  font-size: 4em;
}
.test > div[class*="te"] {
  font-size: 5em;
}
.test > div[class*="artisin"] {
  font-size: 6em;
}
.test > div:
  width: 200px
  attributes:
    title~="test1":
      font-size: 1em
    '[class|="test2"]':
      font-size: 2em
    kool:
      key: class^="test3"
      font-size: 3em
    beerMe:
      key: '[class$="test4"]'
      font-size: 4em
    myName:
      key: class*="te"
      font-size: 5em
    user:
      key: '[class*="artisin"]'
      font-size: 6em

Notes

Common Key

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

Edit
ctr('.test > div', {
width: 200px
attributes: {
// merged into each attribute
common: {
option: {
key: 'class*'
}
font-size: 2em
}
'te': {
background: teal
}
'artisin': {
background: red
}
}
})
.test > div:
width: 200px
attributes:
# merged into each attribute
common:
option:
key: class*
font-size: 2em
te:
background: teal
artisin:
background: red
.test > div {
width: 200px;
}
.test > div[class*="te"] {
font-size: 2em;
background: #008080;
}
.test > div[class*="artisin"] {
font-size: 2em;
background: #f00;
}
ctr('.test > div', {
  width: 200px
  attributes: {
    // merged into each attribute
    common: {
      option: {
        key: 'class*'
      }
      font-size: 2em
    }
    'te': {
      background: teal
    }
    'artisin': {
      background: red
    }
  }
})
.test > div {
  width: 200px;
}
.test > div[class*="te"] {
  font-size: 2em;
  background: #008080;
}
.test > div[class*="artisin"] {
  font-size: 2em;
  background: #f00;
}
.test > div:
  width: 200px
  attributes:
    # merged into each attribute
    common:
      option:
        key: class*
      font-size: 2em
    te:
      background: teal
    artisin:
      background: red

Notes

Omit

Description: A List value for the omit option property in an Object attribute 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 > div', {
width: 200px
attributes: {
common: {
option: {
key: 'class*'
}
font-size: 2em
height: 400px
}
one: {
opacity: 1
}
two: {
option: {
// omits font-size
omit: 'font-size'
}
opacity: 0.5
}
}
})
.test > div:
width: 200px
attributes:
common:
option:
key: class*
font-size: 2em
height: 400px
one:
opacity: 1
two:
option:
# omits font-size
omit: font-size
opacity: 0.5
.test > div {
width: 200px;
}
.test > div[class*="one"] {
opacity: 1;
height: 400px;
font-size: 2em;
}
.test > div[class*="two"] {
opacity: 0.5;
height: 400px;
}
ctr('.test > div', {
  width: 200px
  attributes: {
    common: {
      option: {
        key: 'class*'
      }
      font-size: 2em
      height: 400px
    }
    one: {
      opacity: 1
    }
    two: {
      option: {
        // omits font-size
        omit: 'font-size'
      }
      opacity: 0.5
    }
  }
})
.test > div {
  width: 200px;
}
.test > div[class*="one"] {
  opacity: 1;
  height: 400px;
  font-size: 2em;
}
.test > div[class*="two"] {
  opacity: 0.5;
  height: 400px;
}
.test > div:
  width: 200px
  attributes:
    common:
      option:
        key: class*
      font-size: 2em
      height: 400px
    one:
      opacity: 1
    two:
      option:
        # omits font-size
        omit: font-size
      opacity: 0.5

Notes

Pick

Description: A List value for the pick option property in an Object attribute 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 > div', {
width: 200px
attributes: {
common: {
option: {
key: 'class*'
}
font-size: 2em
height: 400px
}
one: {
opacity: 1
}
two: {
option: {
// only picks height
pick: 'height'
}
opacity: 0.5
}
}
})
.test > div:
width: 200px
attributes:
common:
option:
key: class*
font-size: 2em
height: 400px
one:
opacity: 1
two:
option:
# only picks height
pick: height
opacity: 0.5
.test > div {
width: 200px;
}
.test > div[class*="one"] {
opacity: 1;
height: 400px;
font-size: 2em;
}
.test > div[class*="two"] {
opacity: 0.5;
height: 400px;
}
ctr('.test > div', {
  width: 200px
  attributes: {
    common: {
      option: {
        key: 'class*'
      }
      font-size: 2em
      height: 400px
    }
    one: {
      opacity: 1
    }
    two: {
      option: {
        // only picks height
        pick: 'height'
      }
      opacity: 0.5
    }
  }
})
.test > div {
  width: 200px;
}
.test > div[class*="one"] {
  opacity: 1;
  height: 400px;
  font-size: 2em;
}
.test > div[class*="two"] {
  opacity: 0.5;
  height: 400px;
}
.test > div:
  width: 200px
  attributes:
    common:
      option:
        key: class*
      font-size: 2em
      height: 400px
    one:
      opacity: 1
    two:
      option:
        # only picks height
        pick: height
      opacity: 0.5

Notes

Target

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

Edit
ctr('.test > div', {
width: 200px
attributes: {
common: {
option: {
key: 'class*'
// only merges with "two"
target: 'two'
}
font-size: 2em
height: 400px
}
one: {
opacity: 1
}
two: {
opacity: 0.5
}
}
})
.test > div:
width: 200px
attributes:
common:
option:
key: class*
# only merges with "two"
target: two
font-size: 2em
height: 400px
one:
opacity: 1
two:
opacity: 0.5
.test > div {
width: 200px;
}
.test > div[class*="one"] {
opacity: 1;
}
.test > div[class*="two"] {
opacity: 0.5;
height: 400px;
font-size: 2em;
}
ctr('.test > div', {
  width: 200px
  attributes: {
    common: {
      option: {
        key: 'class*'
        // only merges with "two"
        target: 'two'
      }
      font-size: 2em
      height: 400px
    }
    one: {
      opacity: 1
    }
    two: {
      opacity: 0.5
    }
  }
})
.test > div {
  width: 200px;
}
.test > div[class*="one"] {
  opacity: 1;
}
.test > div[class*="two"] {
  opacity: 0.5;
  height: 400px;
  font-size: 2em;
}
.test > div:
  width: 200px
  attributes:
    common:
      option:
        key: class*
        # only merges with "two"
        target: two
      font-size: 2em
      height: 400px
    one:
      opacity: 1
    two:
      opacity: 0.5

Notes

True Value

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

Edit
ctr('.test > div', {
width: 200px
attributes: {
common: {
option: {
key: 'class*'
}
font-size: 2em
height: 400px
}
one: {
opacity: 1
}
// inherits common
two: true
}
})
.test > div:
width: 200px
attributes:
common:
option:
key: class*
font-size: 2em
height: 400px
one:
opacity: 1
# inherits common
two: true
.test > div {
width: 200px;
}
.test > div[class*="one"] {
opacity: 1;
height: 400px;
font-size: 2em;
}
.test > div[class*="two"] {
height: 400px;
font-size: 2em;
}
ctr('.test > div', {
  width: 200px
  attributes: {
    common: {
      option: {
        key: 'class*'
      }
      font-size: 2em
      height: 400px
    }
    one: {
      opacity: 1
    }
    // inherits common
    two: true
  }
})
.test > div {
  width: 200px;
}
.test > div[class*="one"] {
  opacity: 1;
  height: 400px;
  font-size: 2em;
}
.test > div[class*="two"] {
  height: 400px;
  font-size: 2em;
}
.test > div:
  width: 200px
  attributes:
    common:
      option:
        key: class*
      font-size: 2em
      height: 400px
    one:
      opacity: 1
    # inherits common
    two: true