# Compound selectors > A conditionally-added class gates a compound rule on the same child element, and the marker keeps the compound and combinator selectors alive. **Source:** [https://scoped.svelte.page/examples/compound-selector](https://scoped.svelte.page/examples/compound-selector) **Markdown mirror:** [https://scoped.svelte.page/examples/compound-selector.md](https://scoped.svelte.page/examples/compound-selector.md) --- This mirror preserves the prose, implementation notes, and runnable Svelte source behind the live example page. ## FIG-001: compound selectors. Toggling a conditionally-added class gates a compound rule (.page-rows.paged) on the same child element. The synthesized marker also keeps a descendant-combinator rule alive, so neither survives Svelte's unused-CSS pruning by accident. **Metadata:** tag: `COMPOUND` | syntax: `scoped:class` | selector: `compound` | status: `passing` ### Source #### CompoundSelector.svelte Source file: [src/lib/examples/scoped-props/demos/CompoundSelector.svelte](https://github.com/humanspeak/svelte-scoped-props/blob/main/docs/src/lib/examples/scoped-props/demos/CompoundSelector.svelte) ```svelte
Child component
Source Current result
Compound selector rowClass = ['page-rows', { paged }] .page-rows.paged { … }
Compound selector child-card page-rows{paged ? ' paged' : ''} svelte-parent svelte-child {paged ? 'compound rule applies' : 'compound rule idle'}
Descendant combinator <div class="rows-frame"> .rows-frame .page-rows { … }
Descendant combinator rows-frame svelte-parent > child-card page-rows svelte-parent combinator rule applies
``` #### ChildCard.svelte Source file: [src/lib/examples/scoped-props/demos/components/ChildCard.svelte](https://github.com/humanspeak/svelte-scoped-props/blob/main/docs/src/lib/examples/scoped-props/demos/components/ChildCard.svelte) ```svelte
Child receives class="{classText}".
```