Skip to main content

How to declare a element selector variant on parent element?

.component buttonThe selector you want to insert.parent-element .elementThe element you want to style

Option 1

+component('.btn')
+register
+element('.btn-inner')
+variant('button')
+element('> .icon')

display: inline-block

+________________________
+element('.btn-inner')
display: inline-flex

+________________________
+element('> .icon')
+default
background: grey

+variant('button')
background: red






.btn {
display: inline-block;
}

.btn .btn-inner {
display: inline-flex;
}

.btn .btn-inner > .icon {
background: grey;
}

.btn button.btn-inner > .icon {
background: red;
}

More info: +variant, +default, +register, +element, +component, separator +___

Option 2 - via alias and multiple elements

+component('.btn')
+register
+element('.btn-inner')
+variant('{clickable}', 'a', 'button', 'input')
+element('> .icon')

display: inline-block

+________________________
+element('.btn-inner')
display: inline-flex

+________________________
+element('> .icon')
+default
background: grey

+variant('{clickable}')
background: red






.btn {
display: inline-block;
}

.btn .btn-inner {
display: inline-flex;
}

.btn .btn-inner > .icon {
background: grey;
}

.btn a.btn-inner > .icon, .btn button.btn-inner > .icon, .btn input.btn-inner > .icon {
background: red;
}

More info: +variant, +default, +register, +element, +component, separator +___