---
name: ":main"
area: "API"
kind: "Target selector"
parent: "up.fragment module"
url: "https://unpoly.com/api/main"
---
<nav aria-label="Unpoly docs">[All docs](https://unpoly.com/index.md) · [up.fragment module](https://unpoly.com/api/up.fragment.md)</nav>

# :main

A pseudo-selector that matches the layer's [main fragment](https://unpoly.com/api/up-main.md).

Use `:main` to only update the main fragment, while keeping static layout elements around it. To replace all visible elements of a layer, see [`:layer`](https://unpoly.com/api/layer.md).

<nav aria-label="Guides">

- [Learn: Targeting fragments](https://unpoly.com/learn/targeting-fragments.md)

</nav>

## Targeting the main fragment {#targeting-the-main-fragment}

You can target the main fragment using the `:main` selector:

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

<main>
  Post will appear here
</main>
```

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

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

<main>
  Post will appear here
</main>
```

Also see [targeting the main fragment](https://unpoly.com/learn/targeting-fragments.md#targeting-the-main-element).

## Default main targets {#default-main-targets}

The default main targets are:

- any element with an [`[up-main]`](https://unpoly.com/api/up-main.md) attribute
- the HTML5 [`<main>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/main) element
- the current layer's [topmost swappable element](https://unpoly.com/api/layer.md)

You may configure main target selectors in [`up.fragment.config.mainTargets`](https://unpoly.com/api/up.fragment.config.md#config.mainTargets).