:target
Matches a unique element with an ID that matches the current URL's hash (e.g., #section1). Great for highlighting a section when a user clicks a 'Jump to Section' link.
Quick example
section:target {
background: yellow;
} /* highlights the section the URL points to */Syntax
:target:targetExamples
Highlight a jumped-to section
section:target {
background: #fff8c5;
scroll-margin-top: 80px;
}When a user clicks an anchor link like #pricing, the matching section gets a soft highlight. scroll-margin-top leaves space for a sticky header.
CSS-only tabs
.tab-content { display: none; }
.tab-content:target { display: block; }Click a link like href="#tab-settings" and the matching panel shows. No JavaScript, but URL changes on each click, which updates browser history.
Lightbox modal
.modal { display: none; }
.modal:target { display: flex; }
.modal .close {
/* Link back with empty href or #! to close */
}Basic modal without JavaScript. Trigger link points to #modal-id, close link points back to # to clear the target.
:target Browser Support
This feature is well established and works across many devices and browser versions. It has been available across browsers since 2015.
Safe to use without fallbacks.
Common pitfalls
When the URL hash changes, the browser automatically scrolls the target into view. For tabs or modals this is jarring. Use scroll-margin-top on the target, or preventDefault in JavaScript if you need full control.
Unlike :hover or :focus, only a single element matches :target at any moment. Building multi-select interfaces with :target alone is not possible. Reach for :has() or checkboxes for multi-state patterns.
Every :target link creates a history entry. In a tab interface, clicking through four tabs means the user has to press back four times to leave the page. Use :has() or JavaScript history.replaceState for better UX on stateful UIs.