Skip to main content


In addition to CSS's native pseudo-elements, like ::before and ::backdrop, Stylable allow you to define custom pseudo-elements so that you can target and apply styles to inner parts of your components.

This page goes over how Stylable handles custom pseudo-elements, for more details about the language feature itself, checkout the following resources:


To target an internal element, Use the pseudo-element prefix :: with the part name.

Component::firstlevel::secondlevel {}
deep pseudo-elements

Custom pseudo-elements are not limited to the end of a selector like native pseudo-elements, and can be chained. For example, you can access the label of a navigation button from a gallery: Gallery::navBtn::label

Style a component

Customizing all component instances nested under a stylesheet using the imported component type selector.

@st-import Comp from './';

/* target Comp internal part */
.root Comp::part {/* customize */}

Style a variant

Customizing a variant class of a component by extending a class with the component stylesheet.
@st-import Comp from './';

.compVariant {
/* set compVariant to inherit from Comp */
-st-extends: Comp;
/* target compVariant internal part (inherited from Comp) */
.compVariant::part {/* customize */}

Then set the variant class to the component instance.

import Comp from './comp';
import { classes } from './';

const Page = () => {
return (
/* customize Comp with compVariant class */
<Comp class={classes.compVariant}>


Any CSS class that is exported from a stylesheet is accessible as a pseudo-element.
/* available as ::part for this stylesheet */
.part {}

Additionally a custom-selector defined within a stylesheet is exposed as a custom pseudo-element and will take precedence over a class with the same name.
/* available as ::part for this stylesheet
and preserves the direct child combinator
when used */
@custom-selector :--part .root > .part;
Native pseudo-element override

Override of native pseudo-elements is possible, however it is strongly discouraged.

Element inheritance

An extending stylesheet root automatically inherits any pseudo-elements from the extended definition, and can then override them by defining its own public parts.

Build transformation

Custom pseudo-elements are transformed in build-time to target the internal selector they represent.
.part {}
@custom-selector :--directPart .root > .part;
@st-import Comp from './';

.root {
-st-extends: Comp;

.root::part {}
.root::directPart {}

/* OUTPUT */
.page__root .comp__part {}
.page__root > .comp__part {}