NOTE: Some of the design discussion for this feature has been in

<a href="https://github.com/w3c/csswg-drafts/issues/13163">w3c/csswg-drafts#13163</a>.

<h3 id="trigger-link-pseudo-class">The '':trigger-link'' pseudo-class</h3>

<h3 id="nav-source-pseudo-class">The '':nav-source'' pseudo-class</h3>

This specification defines a new

<dfn id="trigger-link-pseudo" selector>'':trigger-link''</dfn>

that matches link elements that trigger the current navigation.

The '':trigger-link'' pseudo-class matches any element where both:

* the element matches '':any-link''

* the [=current navigation state=] is not null, and element is its [=navigation state/source element=].

This specification defines a <dfn id="nav-source-pseudo" selector>'':nav-source''</dfn> pseudo-class,

matching the element that triggered the current navigation. It is a CSS reflection of the {{NavigateEvent/sourceElement}} property in the Navigation API.

The trigger element can be an [^a^], [^area^], [^form^], a [^input/type/submit^] input, or a [^button^].

Issue: should this apply to forms or submit buttons?

The '':nav-source'' pseudo-class matches any element <var>el</var> where

the [=current navigation state=] is not null, and <var>el</var> is its [=navigation state/source element=].

<div class="example">

A simple example of a '':trigger-link'' selector is this one,

A simple example of a '':nav-source'' selector is this one,

which sets the ''view-transition-name'' for an image thumbnail that is a child of the link that triggers the current navigation.

<pre highlight=css>

:trigger-link .thumb {

<pre highlight=css>``

a:nav-source .thumb {

view-transition-name: active-image;

}

</pre>

The '':nav-source'' pseudo-class can also be used for forms and submit buttons:

<pre highlight=css>``

form:nav-source .submit,

.submit:nav-source {

outline: 3px solid green;

}

</pre>

</div>

<h2 id="conditional-navigation-queries">Conditional rules for navigation queries</h2>