vercel / vercel/next.js

`<Link>` with `href="#someexample"` will not trigger CSS target selector (`#someexample:target{...}`)

Open
#51,346 5 comments 14 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

CSS Linking and Navigating
Dominant language
JavaScript
Stars
142k
Forks
32.4k
Avg merge
2d 14h
Merged PRs (30d)
351

Description

Verify canary release
  • I verified that the issue exists in the latest Next.js canary release
Provide environment information
Operating System:
      Platform: darwin
      Arch: arm64
      Version: Darwin Kernel Version 21.6.0: Mon Aug 22 20:19:52 PDT 2022; root:xnu-8020.140.49~2/RELEASE_ARM64_T6000
    Binaries:
      Node: 18.15.0
      npm: 9.5.0
      Yarn: 3.4.1
      pnpm: 8.6.0
    Relevant packages:
      next: 13.4.6-canary.7
      eslint-config-next: N/A
      react: 18.2.0
      react-dom: 18.2.0
      typescript: 4.9.5
Which area(s) of Next.js are affected? (leave empty if unsure)

App directory (appDir: true), Routing (next/router, next/navigation, next/link)

Link to the code that reproduces this issue or a replay of the bug

https://github.com/tilman/nextlink-css-target-selector-bug

To Reproduce

1.) Open the example under http://localhost:3000/ (for regular pages)
Watch the div below the links wich should turn blue during clicking the links.

Use regular anchor tags:
Click Link 1.) it to see that :target selector changed the style of a div
Click Link 2.): Reset the styling with this link by changing the target to '#'

Use next Link tags:
Click Link 3.) to see that :target selector does not change the style of a div if next/link is used
Click Link 1.)/4.) again to set the blue bg
Clink Link 5.) to reset the styling with this link by changing the target to '#'. Also does not reset the style if regular anchor tag (1./4.) was clicked before to set the style.

2.) Open the example under http://localhost:3000/appExample (for new app dir. Same behaviour)

Describe the Bug

While using a next/link the css :target selector is not working. Only if we use a regular tag.

Expected Behavior

The CSS :target selector should work with next/link the same way as with the <a> tag

Which browser are you using? (if relevant)

chrome

How are you deploying your application? (if relevant)

localhost

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the linked reproduction at github.com/tilman/nextlink-css-target-selector-bug and verify the behavior in both the regular-pages and app-directory examples. Compare the regular anchor and next/link flows in Chrome, then trace the relevant Next.js routing and Link entry points. Done means hash navigation updates the CSS :target selector consistently for next/link in both examples.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, next.js, react
Domain
frontend, web-dev
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.