Skip to main content

How to add extra elements with ~ before sub-element?

.component .inner-context ~The selector you want to insert .elementThe element you want to style

See example

.toggle .checkbox ~The selector you want to insert .textThe element you want to style
+component('.toggle')
+register
+element('.text')

display: inline-flex

+_____________________
+element('.text')
+default
display: inline-block
margin-top: 0.25em

+inner-context('.checkbox ~')
margin-top: 0.5em




.toggle {
display: inline-flex;
}

.toggle .text {
display: inline-block;
margin-top: 0.25em;
}

.toggle .checkbox ~ .text {
margin-top: 0.5em;
}

More info: +inner-context, +element, +register, +component, separator +___