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

# :origin

Your [target selectors](https://unpoly.com/learn/targeting-fragments.md) may use this pseudo-selector to reference the origin element that triggered the change.

The `:origin` placeholder will be replaced with a target [derived](https://unpoly.com/learn/target-derivation.md) from the origin element.

<nav aria-label="Guides">

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

</nav>

<nav aria-label="Contents">

#### Contents

- [Example](#example)
- [Default origins](#default-origins)
- [Setting the origin programmatically](#setting-the-origin-programmatically)

</nav>

## Example {#example}

Below we see two links that will each update the `<div>` next to them. This requires a rather verbose `[up-target]` attribute:

```html
<a href="/tasks/1" up-target="a[href='/tasks/1'] + div">Show task 1</a>
<div>Task 1 will appear here</div>

<a href="/tasks/2" up-target="a[href='/tasks/2'] + div">Show task 2</a>
<div>Task 2 will appear here</div>
```

We can simplify the `[up-target]` by referencing the followed link as `:origin`:

```html
<a href="/tasks/1" up-target=":origin + div">Show task 1</a>
<div>Task 1 will appear here</div>

<a href="/tasks/2" up-target=":origin + div">Show task 2</a>
<div>Task 2 will appear here</div>
```

When a link is clicked, `:origin` is replaced with a target [derived](https://unpoly.com/learn/target-derivation.md) from the link element. For example, clicking on the second link will target `a[href='/tasks/2']`.

## Default origins {#default-origins}

The origin element is automatically set for many actions, for example:

| Action | Origin element |
| --- | --- |
| [Submitting a form](https://unpoly.com/learn/submitting-forms.md) with a submit button | The submit button |
| [Submitting a form](https://unpoly.com/learn/submitting-forms.md) by pressing `Return` | The focused field |
| [Following a link](https://unpoly.com/api/up-follow.md) | The link |
| [Preloading a link](https://unpoly.com/learn/preloading.md) | The link |
| [Validating a field](https://unpoly.com/api/up-validate.md) | The changed field |
| [Auto-submitting a field](https://unpoly.com/api/up-autosubmit.md) | The changed field |
| [Loading deferred content](https://unpoly.com/api/up-defer.md) | The [`[up-defer]`](https://unpoly.com/api/up-defer.md) placeholder |

## Setting the origin programmatically {#setting-the-origin-programmatically}

When updating fragments programmatically through functions like [`up.render()`](https://unpoly.com/api/up.render.md) you may pass an origin element as an `{ origin }` option:

```js
element.addEventListener('click', function(event) {
  up.render('.preview', { url: '/preview', origin: element })
})
```

You do not need to pass an `{ origin }` for functions that already have a natural origin:

```js
up.follow(link) // link will be set as { origin }
```

> #### Tip
>
> Ensuring an origin is set may improve the precision of fragment lookup, even if a [target selector](https://unpoly.com/learn/targeting-fragments.md) doesn't contain an `:origin` reference. In the example above, Unpoly would prefer to match `.preview` in the [region](https://unpoly.com/learn/targeting-fragments.md#ambiguous-selectors) of the origin. If no origin is known, Unpoly will always match the first `.preview` in the current [layer](https://unpoly.com/api/up.layer.md).