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

# :layer

Your [target selectors](https://unpoly.com/learn/targeting-fragments.md) may use this pseudo-selector to replace the layer's topmost swappable element.

<nav aria-label="Guides">

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

</nav>

## What is targeted {#what-is-targeted}

The topmost swappable element is the first child of the layer's container element:

- For the [root layer](https://unpoly.com/api/up.layer.root.md) it is the `<body>` element.
- For an overlay, it is the `{ target }` that the overlay was opened with.
- If an overlay was opened without an explicit target, Unpoly will create a [main fragment](https://unpoly.com/api/up-main.md). This main fragment becomes the topmost swappable target.

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

## Example {#example}

We open an overlay with a target selector `#foo`:

```
up.layer.open({ target: '#foo', content: 'Hello from overlay' })
```

The topmost swappable element is now `#foo`, which we can select with `:layer`:

```js
// targets '#foo'
up.render({ target: ':layer', url: '/page2' })
```

The resolution of `:layer` depends on the targeted layer. For example, when rendering in the root layer, `:layer` will resolve to the `<body>`:

```js
// targets the body
up.render({ target: ':layer', layer: 'root', url: '/page2' })
```