BaselineLab
0Support

Links, actions, and focus

Compare links, pointer, keyboard, descendant focus, fragments, and query context using real browser states.

Read the guide

Ask AI

Links, actions, and focus

Response generated with openai/gpt-5.4-nano. AI can make mistakes. Always review the result.
Current selectora:any-link
Support unknownSpecificity—

Preparing the scenario and its results…

Matches links with href whether visited or not.

Selector preview

HTML
<nav class="link-list" aria-label="Link comparison">
  <a href="" data-visited-demo>This already visited page</a>
  <a href="#guide">Lab guide</a>
  <a>Link without href</a>
</nav>
CSS
a:any-link {
  outline: 3px solid #f97316;
  outline-offset: 3px;
  background-color: color-mix(in oklch, #f97316 16%, transparent);
}

Educational guide to link, action, and focus selectors

Real states, context, and privacy

Learn what depends on history, input device, focus, or the URL.

Back to playground

Mental model

These selectors observe browser state and should not be simulated as persistent values.

LVHA

Link rule order

At equal specificity, declare :link, :visited, :hover, and :active in that order so the cascade preserves the expected state.

:focus-visible

Focus and input modality

:focus means focused; :focus-visible applies the browser heuristic for showing an indicator, especially during keyboard navigation.

:visited

History is not an API

:visited restricts properties and hides matches from JavaScript to prevent history inference.

Actions and focus

Use pointer, press, and keyboard navigation on native controls.

:hover

Elements designated by a pointing device.

Specificity(0, 1, 0)
Behavior
  • The state follows the real pointer.
  • On touch it may be brief, absent, or sticky.
Examples
SelectorSpecificity(0, 1, 1)
button:hover
HTML
Matches: <button>Save</button>
Common mistakes
  • Do not hide essential content until hover.
  • It is not equivalent to focus.
Read the full definitionOpens in a new tab

:active

Elements while they are being activated.

Specificity(0, 1, 0)
Behavior
  • It usually lasts while a press is held.
  • It can apply to buttons and links.
Examples
SelectorSpecificity(0, 1, 1)
button:active
HTML
Matches: <button>Save</button>
Common mistakes
  • It does not mean the current page.
  • Its cascade order matters.
Read the full definitionOpens in a new tab

:focus

The element that currently has focus.

Specificity(0, 1, 0)
Behavior
  • Focus can come from pointer, keyboard, or script.
  • Usually one document element has focus at a time.
Examples
SelectorSpecificity(0, 1, 1)
input:focus
HTML
Matches: <input aria-label="Search" />
Common mistakes
  • Do not remove the indicator without a visible replacement.
  • It does not automatically select the container.
Read the full definitionOpens in a new tab

:focus-visible

A focused element when the browser decides an indicator is needed.

Specificity(0, 1, 0)
Behavior
  • Keyboard modality commonly shows the indicator.
  • The heuristic belongs to the browser.
Examples
SelectorSpecificity(0, 1, 1)
button:focus-visible
HTML
Matches: <button>Continue</button>
Common mistakes
  • It is not simply focus after Tab.
  • Do not fake a state that contradicts the heuristic.
Support and compatibility

See the dedicated Baseline status for :focus-visible.

Read the full definitionOpens in a new tab

:focus-within

An element when it or a descendant has focus.

Specificity(0, 1, 0)
Behavior
  • It can highlight a whole group.
  • The definition includes descendants in shadow trees.
Examples
SelectorSpecificity(0, 1, 1)
label:focus-within
HTML
Matches: <label>Search
  <input />
</label>
Common mistakes
  • The subject is the container, not the control.
  • It does not replace the control focus style.
Support and compatibility

See the dedicated Baseline status for :focus-within.

Read the full definitionOpens in a new tab

URL and scope

Connect the active fragment and the root from which a query is evaluated.

:target

The element whose id matches the URL fragment.

Specificity(0, 1, 0)
Behavior
  • It changes with the hash.
  • There may be no target.
Examples
SelectorSpecificity(1, 1, 0)
#details:target
HTML
<a href="#details">Open</a>
Matches: <section id="details">Details</section>
Common mistakes
  • It is not a freely chosen CSS state.
  • The fragment also affects navigation and scrolling.
Read the full definitionOpens in a new tab

:scope

The contextual root of a query or scoped rule.

Specificity(0, 1, 0)
Behavior
  • In querySelector() it represents the queried element.
  • It can require direct children of that root.
Examples
SelectorSpecificity(0, 1, 1)
:scope > article
HTML
<section><!-- query root -->
Matches:   <article>Direct</article>
  <div><article>Nested</article></div>
</section>
Common mistakes
  • It is not always equivalent to :root.
  • Its subject depends on evaluation context.
Support and compatibility

See the Baseline status for :scope in selector APIs.

Read the full definitionOpens in a new tab