Basic¶

Description: The value for the attachTo option property specifies a parent selector for the state pseudo-class condition to attach to.

// root === 0
ctr('.test', {
  width: 200px
  // .myKoolClass === 1
  'component-.myKoolClass': {
    size: 100px
    // p === 2
    'component-p': {
      hover: {
        on: {
          option: {
            // attach to .myKoolClass
            attachTo: 1
          }
          color: red
        }
        non: {
          option: {
            // attach to root
            attachTo: 0
          }
          color: blue
        }
      }
    }
  }
})

# root === 0
.test:
  width: 200px
  # .myKoolClass === 1
  component-.myKoolClass:
    size: 100px
    # p === 2
    component-p:
      hover:
        on:
          option:
            # attach to .myKoolClass
            attachTo: 1
          color: red
        non:
          option:
            # attach to root
            attachTo: 0
          color: blue

.test {
  width: 200px;
}
.test > .myKoolClass {
  width: 100px;
  height: 100px;
}
.test > .myKoolClass:hover > p {
  color: #f00;
  transition-delay: 0s;
  transition-duration: 0.5s;
  transition-property: color;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
.test:not(:hover) > .myKoolClass > p {
  color: #00f;
  transition-delay: 0s;
  transition-duration: 0.5s;
  transition-property: color;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}

// root === 0
ctr('.test', {
  width: 200px
  // .myKoolClass === 1
  'component-.myKoolClass': {
    size: 100px
    // p === 2
    'component-p': {
      hover: {
        on: {
          option: {
            // attach to .myKoolClass
            attachTo: 1
          }
          color: red
        }
        non: {
          option: {
            // attach to root
            attachTo: 0
          }
          color: blue
        }
      }
    }
  }
})

.test {
  width: 200px;
}
.test > .myKoolClass {
  width: 100px;
  height: 100px;
}
.test > .myKoolClass:hover > p {
  color: #f00;
  transition-delay: 0s;
  transition-duration: 0.5s;
  transition-property: color;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
.test:not(:hover) > .myKoolClass > p {
  color: #00f;
  transition-delay: 0s;
  transition-duration: 0.5s;
  transition-property: color;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}

# root === 0
.test:
  width: 200px
  # .myKoolClass === 1
  component-.myKoolClass:
    size: 100px
    # p === 2
    component-p:
      hover:
        on:
          option:
            # attach to .myKoolClass
            attachTo: 1
          color: red
        non:
          option:
            # attach to root
            attachTo: 0
          color: blue

Notes

• The index of the root selector is 0 or the string 'root', that being said, you cannot use attachTo on the root level
• Why would I want to do this?
  • Because it is an ultra powerful concept that allows you to perform all kinds of nifty state logic
  • The basic gist is that it allows you to attach a state to a parent element so that the state action takes place if the parent meets the state condition
  • In the example above, the p element hover state transition occurs when the user hovers over .myKoolClass rather than itself

String Key¶

Description: A String value can represent the attachTo target selector declaratively.

ctr('.test', {
  width: 200px
  'component-.myKoolClass': {
    width: 100px
    'component-span': {
      hover: {
        option: {
          attachTo: '.myKoolClass'
        }
        on: {
          opacity: 1
        }
        non: {
          opacity: 0.5
        }
      }
    }
  }
})

.test:
  width: 200px
  component-.myKoolClass:
    width: 100px
    component-span:
      hover:
        option:
          attachTo: .myKoolClass
        on:
          opacity: 1
        non:
          opacity: 0.5

.test {
  width: 200px;
}
.test > .myKoolClass {
  width: 100px;
}
.test > .myKoolClass:hover > span {
  opacity: 1;
  transition-delay: 0s;
  transition-duration: 0.5s;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
.test > .myKoolClass:not(:hover) > span {
  opacity: 0.5;
  transition-delay: 0s;
  transition-duration: 0.5s;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}

ctr('.test', {
  width: 200px
  'component-.myKoolClass': {
    width: 100px
    'component-span': {
      hover: {
        option: {
          attachTo: '.myKoolClass'
        }
        on: {
          opacity: 1
        }
        non: {
          opacity: 0.5
        }
      }
    }
  }
})

.test {
  width: 200px;
}
.test > .myKoolClass {
  width: 100px;
}
.test > .myKoolClass:hover > span {
  opacity: 1;
  transition-delay: 0s;
  transition-duration: 0.5s;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
.test > .myKoolClass:not(:hover) > span {
  opacity: 0.5;
  transition-delay: 0s;
  transition-duration: 0.5s;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}

.test:
  width: 200px
  component-.myKoolClass:
    width: 100px
    component-span:
      hover:
        option:
          attachTo: .myKoolClass
        on:
          opacity: 1
        non:
          opacity: 0.5

Notes

• You can omit the class or id prefix if you wish

Previous¶

Description: The value of 'previous' can be used to attach to the previous parent selector.

ctr('.test', {
  width: 200px
  'component-.myKoolClass': {
    width: 100px
    'component-p': {
      color: red
      hover: {
        option: {
          attachTo: 'previous'
        }
        on: {
          opacity: 1
        }
        non: {
          opacity: 0.5
        }
      }
    }
  }
})

.test:
  width: 200px
  component-.myKoolClass:
    width: 100px
    component-p:
      color: red
      hover:
        option:
          attachTo: previous
        on:
          opacity: 1
        non:
          opacity: 0.5

.test {
  width: 200px;
}
.test > .myKoolClass {
  width: 100px;
}
.test > .myKoolClass > p {
  color: #f00;
}
.test > .myKoolClass:hover > p {
  opacity: 1;
  transition-delay: 0s;
  transition-duration: 0.5s;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
.test > .myKoolClass:not(:hover) > p {
  opacity: 0.5;
  transition-delay: 0s;
  transition-duration: 0.5s;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}

ctr('.test', {
  width: 200px
  'component-.myKoolClass': {
    width: 100px
    'component-p': {
      color: red
      hover: {
        option: {
          attachTo: 'previous'
        }
        on: {
          opacity: 1
        }
        non: {
          opacity: 0.5
        }
      }
    }
  }
})

.test {
  width: 200px;
}
.test > .myKoolClass {
  width: 100px;
}
.test > .myKoolClass > p {
  color: #f00;
}
.test > .myKoolClass:hover > p {
  opacity: 1;
  transition-delay: 0s;
  transition-duration: 0.5s;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
.test > .myKoolClass:not(:hover) > p {
  opacity: 0.5;
  transition-delay: 0s;
  transition-duration: 0.5s;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}

.test:
  width: 200px
  component-.myKoolClass:
    width: 100px
    component-p:
      color: red
      hover:
        option:
          attachTo: previous
        on:
          opacity: 1
        non:
          opacity: 0.5

Notes

• 'previous' alias: 'prv'