Skip to content

Notes caveats that make :target difficult to use with dynamic content #11928

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 2 commits into from
Closed

Notes caveats that make :target difficult to use with dynamic content #11928

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
baa56ba
Notes some caveats with :target that make it difficult to use with dy…
stephband Jan 11, 2022
a47e94a
Removes line formatting
stephband Jan 11, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 9 additions & 1 deletion files/en-us/web/css/_colon_target/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ browser-compat: css.selectors.target
---
{{CSSRef}}

The **`:target`** [CSS](/en-US/docs/Web/CSS) [pseudo-class](/en-US/docs/Web/CSS/Pseudo-classes) represents a unique element (the _target element_) with an {{htmlattrxref("id")}} matching the URL's fragment.
The **`:target`** [CSS](/en-US/docs/Web/CSS) [pseudo-class](/en-US/docs/Web/CSS/Pseudo-classes) represents a unique element (the _target element_) with an {{htmlattrxref("id")}} matching the URL's fragment at the time the page loaded.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

not just at page load. when the page scrolls AND the fragment is changed, the selector matches, even if the id was added well after page load (my test was 10s) ... the URL fragment wasn't there at page load.


```css
/* Selects an element with an ID matching the current URL's fragment */
Expand All @@ -35,6 +35,14 @@ The following element would be selected by a `:target` selector when the current

{{csssyntax}}

## Caveats

There are two caveats that make the `:target` selector unsuitable for use with dynamic content.

1. The target element is determined at the time of `DOMContentLoad`, upon navigations triggered by clicking on links, and when setting `window.location` or `window.location.hash`. It does NOT update when changing the location hash via `window.history.pushState()` or `window.history.replaceState()`. Pages relying on `history` to navigate cannot rely on `:target` to highlight content.
Copy link
Member

@estelle estelle Jan 14, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

is this accurate, or is it only when history.pushState() doesn't trigger a scroll to the fragment?


2. Because the target element has already been determined on `DOMContentLoaded`, the `:target` selector does not select a matching element added to the DOM at some time after `DOMContentLoaded`.

## Examples

### A table of contents
Expand Down