The :target pseudo-class in CSS represents an element whose id matches the fragment identifier (hash) in the current URL. It allows you to style elements when they are the target of a link.

Key Points About :target

1
:target applies styles only when the element's id matches the URL hash (e.g., #section1).
2
It is often used for highlighting sections, creating tabbed interfaces, or simple in-page navigation effects.
3
Only one element can be targeted at a time since a URL can have only one fragment identifier.

Example: Using :target

In this example, when you click a link pointing to #section1 or #section2, the corresponding section becomes the target and is highlighted using the :target pseudo-class.

Best Practices

1
Use :target to highlight or animate elements when navigated via fragment identifiers.
2
Combine with transitions for smooth visual feedback.
3
Avoid relying solely on :target for critical functionality, as the effect depends on the URL fragment.
4
Test across browsers, as some older browsers may have limited support.

Difficulty: 3/10

Topics: CSS pseudo-classes, anchor link targeting, UI state styling

Scenario Questions

0-2 years experience

1
You're building a FAQ page where clicking a question expands the answer. You're using anchor links and CSS only — how would you use :target to show the answer when the link is clicked?
2
A user clicks a link like /page#section2, but nothing changes visually. What are two possible CSS reasons why :target isn't working?
3
You have a button that links to #modal, and you want the modal to appear when clicked. What CSS rule would you write to show it only when #modal is the target?

2-5 years experience

1
Your team built a tabbed interface using :target, but users report that after navigating away and back, the wrong tab stays open. What’s likely happening, and how would you debug it?
2
You’re using :target to toggle a mobile sidebar, but on iOS Safari, the page scrolls unpredictably when the hash changes. How would you fix this without JavaScript?
3
A designer wants the :target element to fade in smoothly, but transitions aren’t working. What CSS property is probably missing, and what’s a workaround that still uses :target?

5-8 years experience

1
You’re designing a documentation site with hundreds of anchor-linked sections. How would you evaluate whether :target is the right solution versus a JS-based router, considering performance, accessibility, and SEO?
2
Your component library uses :target for modals, but now you need to support deep linking from external sites. What edge cases arise when users bookmark or share URLs with multiple fragments, and how would you handle them?
3
A legacy feature relies on :target for navigation, but now you’re migrating to React Router. How would you deprecate the CSS-only approach without breaking bookmarks or analytics tracking?

8+ years experience

1
Your company’s documentation platform has been using :target for 5 years across 20+ microsites. Now you’re consolidating into a single SPA. How would you architect a migration plan that preserves deep links, accessibility, and SEO while phasing out CSS-only targeting?
2
You’re advising a startup on whether to use :target for their new help center. What long-term maintenance, scalability, and cross-team coordination risks would you highlight, and how would you mitigate them?
3
A major browser is considering deprecating fragment-based scrolling behavior. How would you assess the impact on your CSS-driven navigation systems, and what architectural changes would you propose to future-proof them?

Follow-up Questions

❓How would you prevent layout jank when :target triggers a sudden style change?
❓What happens if multiple elements have the same ID and one is targeted?
❓Can you use :target to style a parent element? Why or why not?