Skip to main content

Global Selectors

In Stylable, selectors are scoped to the stylesheet. But what if you want to target global or other selectors that are not scoped? You can use the :global() directive selector.

In this example .classB and .classC are not scoped to Comp but are part of the selector query.

@namespace "Comp";
.classA :global(.classB > .classC) .classD:hover {
color: red;
}
/* CSS output */
.Comp__classA .classB > .classC .Comp__classD:hover {
color: red;
}
note

You can also use global to keep pseudo-classes native. You can describe them using the syntax below where classA is scoped and :selected is native.

.classA:global(:selected) {
color: red;
}