Skip to content
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.

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

:target matches the current "target element", not the url fragment #37559

Open
zcdunn opened this issue Jan 8, 2025 · 1 comment · May be fixed by #37584
Open

:target matches the current "target element", not the url fragment #37559

zcdunn opened this issue Jan 8, 2025 · 1 comment · May be fixed by #37584
Labels
Content:CSS Cascading Style Sheets docs Content:HTML Hypertext Markup Language docs needs triage Triage needed by staff and/or partners. Automatically applied when an issue is opened.

Comments

@zcdunn
Copy link

zcdunn commented Jan 8, 2025

MDN URL

https://developer.mozilla.org/en-US/docs/Web/CSS/:target

What specific section or headline is this issue about?

the whole page

What information was incorrect, unhelpful, or incomplete?

The page explains that the :target pseudo-class

represents a unique element (the target element) with an id matching the URL's fragment.

Throughout the rest of the page, the examples say that the selector will match if the URL has a fragment that matches an elements id. But the target element isn't always the element with an id matching the URL fragment. SPAs make use of pushState/replaceState for navigation and apparently the target element is not updated in response to these (whatwg/html#639 (comment)) so :target will not always reflect the URL fragment.

What did you expect to see?

I would expect the document to emphasize that the selector matches the "target element" and explain that it won't respond to changes in the URL.

Do you have any supporting links, references, or citations?

Do you have anything more you want to share?

No response

MDN metadata

Page report details
@zcdunn zcdunn added the needs triage Triage needed by staff and/or partners. Automatically applied when an issue is opened. label Jan 8, 2025
@github-actions github-actions bot added Content:CSS Cascading Style Sheets docs Content:HTML Hypertext Markup Language docs labels Jan 8, 2025
@OnkarRuikar
Copy link
Contributor

It's about document's target element and not the URL fragment. The document's target element is set using the URL fragment after the document is loaded. It looks like, unlike back()\forward(), the pushState() doesn't update the document's target element.

@OnkarRuikar OnkarRuikar linked a pull request Jan 10, 2025 that will close this issue
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Content:CSS Cascading Style Sheets docs Content:HTML Hypertext Markup Language docs needs triage Triage needed by staff and/or partners. Automatically applied when an issue is opened.
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants