> ## Documentation Index
> Fetch the complete documentation index at: https://documentation.outpost.pub/llms.txt
> Use this file to discover all available pages before exploring further.

# Legacy vs. Scoped CTA CSS

> How Custom CSS scoping works on Auto Display CTAs, how to spot a legacy CTA, and how to upgrade it.

Every Auto Display CTA is either **scoped** or **legacy (unscoped)**, set by a single per-CTA scoping setting. On a **scoped** CTA, Outpost prepends a CTA-specific selector to every rule you write, so your styles only affect that one CTA. On a **legacy (unscoped)** CTA, your rules are injected as-is and apply to anything on the page that matches. When Outpost introduced CSS scoping in May 2026, every CTA that already existed was set to legacy so its rendering wouldn't change in production; every CTA created since is scoped by default.

## Tell which mode your CTA uses

Open the CTA in the editor and go to its **Custom CSS** section. If you see an orange **LEGACY CSS** banner and an orange **Legacy** badge there, the CTA is on legacy CSS. No banner means the CTA is scoped.

In the **Select CTA** picker on a slot's audience row, legacy CTAs also carry a red **Legacy CSS** badge under their status badge.

## How scoping works

Outpost wraps every rule you write in `.outpost-cta[data-cta-id="…"]`. The same `.outpost-cta-heading { font-style: italic; }` becomes effectively `.outpost-cta[data-cta-id="abc123"] .outpost-cta-heading { font-style: italic; }`. You don't add the wrapper yourself — write the CSS as if this were the only element on the page.

See [Custom CSS in the CTA Library guide](/features/cta-library#custom-css) for the class hooks (`.outpost-cta-heading`, `.outpost-cta-subheading`, `.outpost-cta-submit`, `.outpost-cta-inner`).

<Warning>
  `:root`, `html`, and `body` selectors are treated as global and are **not** scoped, even on a scoped CTA. Move those rules onto `.outpost-cta-*` elements instead.
</Warning>

## Upgrade a legacy CTA

Upgrading is a clone-and-swap. There's no in-place toggle — see [One-way by design](#one-way-by-design).

<Steps>
  <Step title="Clone from the editor">
    Open the legacy CTA in the editor and click **Clone this CTA and upgrade** in the red banner. A confirm dialog summarizes what's about to happen. Accept it — Outpost creates a new CTA with your Custom CSS copied over and scoping turned on.
  </Step>

  <Step title="Check the new CTA's CSS">
    Open the clone and review the Custom CSS field. Anything that targeted `:root`, `html`, `body`, or selectors *outside* `.outpost-cta-*` won't behave the way it did under legacy. Rewrite those rules onto the CTA's own elements.
  </Step>

  <Step title="Swap in the new CTA">
    Go to the [slot or audience](/features/cta-slots) currently serving the legacy CTA, click the **Browse / change** button (list icon) on the audience row, and select the new clone. The legacy CTA keeps serving until you do this.
  </Step>

  <Step title="Archive the legacy CTA">
    Once the clone is serving correctly, set the legacy CTA to inactive or archive it. Keep it around if you want its history — see [Analytics history](#analytics-history).
  </Step>
</Steps>

## Analytics history

CTAs are tracked by ID. Cloning produces a new ID, so the new CTA starts with **zero impressions and conversions**. The legacy CTA keeps its history.

<Tip>
  If the historical numbers matter, archive the legacy CTA rather than deleting it. Analytics remain queryable.
</Tip>

## One-way by design

Once a CTA is on scoped CSS, it stays scoped. There's no toggle back to legacy. Legacy and scoped CSS have meaningfully different rendering behavior, and a silent round-trip would change what your readers see on the page. If you need to compare behavior, keep the legacy CTA alongside the clone.

## Frequently asked questions

<AccordionGroup>
  <Accordion title="What does 'legacy' mean here?">
    "Legacy" means a CTA's Custom CSS isn't scoped — it's injected onto the page without a CTA-specific selector prefix, so the rules can match elements outside the CTA. Every CTA that existed before the May 2026 scoping change was set this way. Legacy CTAs aren't broken — they render the way they always have. The editor labels them so you know which rules apply.
  </Accordion>

  <Accordion title="Will my legacy CTA stop working?">
    No. Legacy CTAs continue to render and serve to readers exactly as they did before May 2026. The change was opt-in for new CTAs; existing ones were left on the old behavior on purpose.
  </Accordion>

  <Accordion title="Why was my CTA marked Legacy if it doesn't have any Custom CSS?">
    The Legacy marker reflects whether the CTA scopes its CSS, not whether you've written any. Every CTA from before the May 2026 scoping change is on the legacy (unscoped) setting, so the marker shows even on one with an empty Custom CSS box. There's nothing to leak while it's empty, so the warning is informational — but if you ever add Custom CSS, those rules would be unscoped. Cloning it now sets you up on the new behavior for the future.
  </Accordion>

  <Accordion title="The 'Clone this CTA and upgrade' button created a new CTA but my slot still shows the legacy one. Why?">
    Cloning creates a draft. It deliberately does **not** reassign any slots or audiences — your legacy CTA keeps serving until you swap the clone in yourself. Open the slot, click the **Browse / change** button on the audience row, and pick the new clone.
  </Accordion>

  <Accordion title="What's the difference between Custom CSS on a legacy CTA and on a scoped one?">
    The selectors you write are identical. The difference is where they apply. On a legacy CTA, `.outpost-cta-heading { color: red; }` recolors every matching element on the page. On a scoped CTA, the same rule only recolors the heading on that one CTA — Outpost rewrites the selector to include the CTA's unique `data-cta-id` wrapper.
  </Accordion>

  <Accordion title="Can I edit a legacy CTA's CSS without upgrading?">
    Yes. The Custom CSS field on a legacy CTA still works — your changes save and render as unscoped CSS, same as before. Upgrading is only required if you want scoped behavior or want to clear the Legacy marker.
  </Accordion>

  <Accordion title="Why can't I just toggle scoping on for the existing CTA?">
    Legacy and scoped CSS behave differently. A `body { background: ... }` rule that works on a legacy CTA would silently stop working under scoping. Flipping the flag in place would change what your readers see without warning. Cloning forces you to review the rules first, then swap the new CTA in deliberately.
  </Accordion>
</AccordionGroup>