Syntax¶

Description: attribute is defined as an <identifier> that selects an element using the presence of a given attribute or attribute value.

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

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

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

Notes

• Regex match: /^attr$|^attribute$|^attributes$|^attr-|^attribute-|^customAttr/i
• MDN Attribute selectors

Basic¶

Description: The attribute Object creates an attribute selector for the <identifier> at the scope level it is defined.

ctr('.test > a', {
  width: 200px
  attribute: {
    key: '[href^="#"]'
    font-size: 1em
  }
})

.test > a:
  width: 200px
  attribute:
    key: '[href^="#"]'
    font-size: 1em

.test > a {
  width: 200px;
}
.test > a[href^="#"] {
  font-size: 1em;
}

ctr('.test > a', {
  width: 200px
  attribute: {
    key: '[href^="#"]'
    font-size: 1em
  }
})

.test > a {
  width: 200px;
}
.test > a[href^="#"] {
  font-size: 1em;
}

.test > a:
  width: 200px
  attribute:
    key: '[href^="#"]'
    font-size: 1em

Notes

• attribute alias: attr
• The key property can be defined inside or outside the option Object
• Attribute examples
  • span[lang]
  • a[href^="#"]
  • div[class^="main"]
  • input[type="email" i]

Bracketless¶

Description: Square brackets can be omitted from the key value.

ctr('.test > div', {
  width: 200px
  attribute: {
    key: 'class$="choo-choo"'
    font-size: 2em
  }
})

.test > div:
  width: 200px
  attribute:
    key: class$="choo-choo"
    font-size: 2em

.test > div {
  width: 200px;
}
.test > div[class$="choo-choo"] {
  font-size: 2em;
}

ctr('.test > div', {
  width: 200px
  attribute: {
    key: 'class$="choo-choo"'
    font-size: 2em
  }
})

.test > div {
  width: 200px;
}
.test > div[class$="choo-choo"] {
  font-size: 2em;
}

.test > div:
  width: 200px
  attribute:
    key: class$="choo-choo"
    font-size: 2em

Notes

• You may find this notation a bit more readable since all attribute selectors follow the same schema