up.fragment :main

HTML selector

A pseudo-selector that matches the layer's main content area.

Use :main to only update the main page content, while keeping static layout elements around it. To replace all visible elements of a layer, see :layer.

Targeting the main element

You can target the main element using the :main selector:

<a href="/cards/5" up-target=":main">Load post</a>

<main>
  Post will appear heare
</main>

Unpoly will also update :main if no other target is given:

<a href="/cards/5" up-follow>Load post</a>

<main>
  Post will appear heare
</main>

Also see targeting the main element.

Default main targets

The default main targets are:

• any element with an [up-main] attribute
• the HTML5 <main> element
• the current layer's topmost swappable element

You may configure main target selectors in up.fragment.config.mainTargets.