CSS :local-link Pseudo-Class

CSS :local-link Pseudo-Class

The CSS :local-link pseudo-class matches hyperlinks whose destination is the current document. It is intended to identify links that point to the page being viewed, regardless of whether those links are visited or unvisited.

:local-link Syntax

selector:local-link {
  property: value;
}

The :local-link pseudo-class is added directly to a hyperlink selector without a space. It takes no arguments.

Basic Example

a:local-link {
  color: #006699;
  font-weight: bold;
}

This rule is intended to style links whose destinations match the current document.

Navigation Example

nav a:local-link {
  text-decoration: underline;
}

This rule would underline navigation links pointing to the current document in a browser that implements the pseudo-class.

No Parameters

Unlike functional pseudo-classes such as :is() or :not(), :local-link does not use parentheses or accept values.

How :local-link Works

The :local-link pseudo-class compares a hyperlink's destination URL with the URL of the current document.

HTML Example

<a href="current-page.html">Current Page</a>
<a href="another-page.html">Another Page</a>

If the document is located at current-page.html, the first link qualifies for :local-link matching. The second link does not.

CSS Example

a:local-link {
  border-bottom: 2px solid #006699;
}

In an implementation that supports :local-link, the rule would apply to the link pointing to the current document.

Independent of Visit History

The pseudo-class is based on the link destination rather than the browser's visited-link history.

Current Document Matching

Matching is based on the resolved URL, not on whether the visible link text contains the page title or filename.

Browser Implementation

The pseudo-class is defined in the CSS Selectors specification, but it is not broadly implemented in browsers. Do not rely on it for essential navigation styling.

URL Matching

The :local-link pseudo-class is designed to identify hyperlinks whose URLs refer to the current document.

Current Document Example

Assume the current document is:

https://example.com/tutorials/css.html

Matching Link

<a href="/tutorials/css.html">CSS Tutorial</a>

This link resolves to the current document and qualifies for matching.

Nonmatching Link

<a href="/tutorials/html.html">HTML Tutorial</a>

This link points to a different document and does not qualify for matching.

URL Components

URL components such as the path and query string can affect whether two URLs refer to the same document. Fragment identifiers are treated separately because they identify locations within a document.

Resolved URLs

Relative URLs are resolved against the document's base URL before their destinations are compared.

Fragment Links

Fragment links point to locations within a document. They are a common example of links that qualify for :local-link matching.

HTML Example

<a href="#syntax">Jump to Syntax</a>
<a href="#examples">Jump to Examples</a>

Both links refer to locations within the current document.

CSS Example

a:local-link {
  text-decoration-thickness: 2px;
}

In a supporting implementation, the rule would apply to these same-document links.

Fragment Identifiers

The fragment portion of a URL identifies a location within a document. Different fragments can still refer to the same underlying document.

Not the Same as :target

The :target pseudo-class selects an element identified by the current URL fragment. The :local-link pseudo-class selects hyperlinks that refer to the current document.

Relative and Absolute Links

Both relative and absolute hyperlinks can refer to the current document.

Relative URL

<a href="css.html">CSS Tutorial</a>

Root-Relative URL

<a href="/tutorials/css.html">CSS Tutorial</a>

Absolute URL

<a href="https://example.com/tutorials/css.html">CSS Tutorial</a>

When these URLs resolve to the current document, they qualify for :local-link matching.

The base Element

An HTML <base> element can change how relative URLs are resolved. This can affect whether a relative hyperlink refers to the current document.

Different Destinations

A link to another page does not match merely because it belongs to the same website or directory.

:local-link vs. :link

The :local-link and :link pseudo-classes match hyperlinks using different conditions.

Comparison

CSS Example

a:link {
  color: #006699;
}
a:local-link {
  font-weight: bold;
}

The first rule targets unvisited hyperlinks. The second is intended to target hyperlinks pointing to the current document.

Independent Conditions

The :local-link condition is independent of visited history. A local link may be visited or unvisited.

:local-link vs. :any-link

The :any-link pseudo-class matches hyperlinks regardless of their visited state, while :local-link is limited to links pointing to the current document.

Comparison

CSS Example

a:any-link {
  text-decoration: underline;
}
a:local-link {
  font-weight: bold;
}

The :any-link rule applies to all hyperlinks. The :local-link rule is intended to emphasize links to the current document.

Browser Compatibility

Unlike :any-link, which is widely supported, :local-link has limited browser implementation.

Navigation Menus

One intended use of :local-link is to identify the current page in a navigation menu.

HTML Example

<nav class="site-nav" aria-label="Main navigation">
  <a href="index.html">Home</a>
  <a href="about.html">About</a>
  <a href="contact.html">Contact</a>
</nav>

Proposed CSS

.site-nav a:local-link {
  font-weight: bold;
  text-decoration: underline;
}

In a supporting browser, this rule would identify the link pointing to the current document.

Reliable Alternative

<a href="about.html" aria-current="page">About</a>

.site-nav a[aria-current="page"] {
  font-weight: bold;
  text-decoration: underline;
}

The aria-current="page" attribute provides a reliable way to identify the current page in navigation. It also communicates the current-page state to assistive technologies.

Recommended Approach

Use aria-current="page" for production navigation menus rather than relying on :local-link browser support.

:local-link Specificity

The :local-link pseudo-class contributes a specificity of 0-1-0.

Specificity Examples

Specificity Example

a {
  color: #333;
}
a:local-link {
  color: #006699;
}

In a supporting browser, the :local-link rule would take precedence over the type selector when both match and other cascade factors are equal.

Practical Uses

The :local-link pseudo-class is intended for styling links that refer to the current document.

Current Page Navigation

Identify the current page in a navigation menu.

Same-Document Links

Apply special formatting to hyperlinks that refer to the current document.

Table of Contents

Distinguish same-document navigation links from links to other documents.

Documentation Websites

Identify links that point to the page currently being viewed.

Future CSS Support

The pseudo-class provides a standardized way to express current-document link matching if browser support becomes available.

Limitations

The most important limitation of :local-link is its lack of broad browser support.

Limited Browser Implementation

Major browsers do not consistently implement :local-link. Rules using it may be ignored.

Not a General Same-Site Selector

The pseudo-class does not match every link on the same domain. It is intended to match the current document.

Not a Visited-State Selector

It does not indicate whether a destination has been visited.

Not a Target Selector

It does not select the element identified by a fragment identifier. Use :target for that purpose.

Not a Replacement for aria-current

The pseudo-class does not communicate the current-page state to assistive technologies.

Fallback Required

Use a supported selector or an explicit current-page class or attribute when the styling must work reliably.

Accessibility

Current-page navigation should be understandable visually and through assistive technologies.

Use aria-current

<a href="about.html" aria-current="page">About</a>

The aria-current="page" attribute identifies the link representing the current page.

Style the Current Page

a[aria-current="page"] {
  font-weight: bold;
  text-decoration: underline;
}

This approach works in modern browsers and does not depend on support for :local-link.

Visual Identification

Use more than color alone to identify the current page. Underlines, borders, and font-weight changes can provide additional visual cues.

Keyboard Navigation

Keep navigation links keyboard accessible and provide visible focus indicators.

Best Practices

• Understand that :local-link matches hyperlinks to the current document, not every link on the same website.
• Do not rely on :local-link for essential production styling.
• Use aria-current="page" to identify the current page in navigation.
• Use [aria-current="page"] as a reliable CSS selector.
• Use :any-link when styling all visited and unvisited hyperlinks.
• Use :link when styling unvisited hyperlinks.
• Use :target when styling the element identified by the current URL fragment.
• Check browser compatibility before using experimental or unsupported selectors.
• Provide clear visual and accessible current-page indicators.

:local-link Example

This example demonstrates the intended behavior of :local-link and provides a supported alternative using aria-current="page". The current-page link is highlighted with a blue background and bold text.

HTML

<nav class="local-link-demo" aria-label="Example navigation">
  <a href="index.html">Home</a>
  <a href="local-link-01.html" aria-current="page">Current Page</a>
  <a href="contact.html">Contact</a>
</nav>

CSS

.local-link-demo a {
  display: block;
  padding: 10px;
  margin-bottom: 6px;
  border: 1px solid #ccc;
  color: #333;
  text-decoration: none;
}
.local-link-demo a:local-link {
  background-color: #eaf6fc;
  border-color: #006699;
  color: #006699;
  font-weight: bold;
}
.local-link-demo a[aria-current="page"] {
  background-color: #eaf6fc;
  border-color: #006699;
  color: #006699;
  font-weight: bold;
}

Browser Result

Play in Editor

Note: The current-page link is highlighted using [aria-current="page"], which works even when the browser does not support :local-link. The :local-link rule illustrates the proposed selector behavior.

Browser Support

Baseline: Limited availability. The :local-link pseudo-class is specified in CSS Selectors Level 4 but is not broadly supported in major browsers. Do not rely on it for production styling without a fallback.

For current compatibility information, visit Can I Use? and search for :local-link.

Specifications

The :local-link pseudo-class is defined in CSS Selectors Level 4 as a location pseudo-class. It matches hyperlinks whose target URL refers to the current document.

Selectors Level 4 - :local-link