Syntax¶

Description: element is defined as a pseudo-class or pseudo-element whose <identifier> does not alter the state.

ctr('<#selector>', {
  element: {
    key: '<identifier>'
    <...>: <...>
  }
})

<#selector>:
  element:
    key: <identifier>
    <...>: <...>

<#selector>:<identifier> {
  <...>: <...>;
}

Notes

• Regex Match: /^elm$|^element$|^elm-|^element-|^customElm|^before$|^after$|-child$|-child\(\d+\)$|-type$|-type\(\d+\)$/i
• Pseudo-classes that alter the state:
  • active - checked - disabled - enabled - focus - in-range - hover
  • invalid - link - optional - out-of-range - required - valid - visited
  • If you want to use one of these pseudo-classes use a state
  • While you could create a state using an element Object and vice versa, it would be counter-productive
• Due to the unique nature of the negation pseudo-class not it is a feature unto itself located at non
• MDN Pseudo-classes
• MDN Pseudo-elements

Basic¶

Description: The element Object creates a pseudo-class or pseudo-element for the <identifier> at the scope level it is defined.

ctr('.test', {
  width: 200px
  element: {
    key: 'before'
    content: 'ctr'
    font-size: 1em
  }
})

.test:
  width: 200px
  element:
    key: before
    content: ctr
    font-size: 1em

.test {
  width: 200px;
}
.test::before {
  font-size: 1em;
  content: "ctr";
}

ctr('.test', {
  width: 200px
  element: {
    key: 'before'
    content: 'ctr'
    font-size: 1em
  }
})

.test {
  width: 200px;
}
.test::before {
  font-size: 1em;
  content: "ctr";
}

.test:
  width: 200px
  element:
    key: before
    content: ctr
    font-size: 1em

Notes

• element alias: elm
• The key property can be define inside or outside the option Object
• Element examples
  • .test::after
  • .test::before
  • .test:first-child
  • .test:only-of-type
• By default, the colon conforms to best practices, although, it can be changed via the colon option property
  • Unless you are forced to support the browser which must not be named this should not be an issue