:target
Matches the element whose `id` equals the fragment in the address after `#`.
Syntax
selector:target { … }Examples
Click the link — the section it points to is highlighted:
<style>
section { padding: 8px; }
section:target { background: lightyellow; outline: 2px solid gold; }
</style>
<p><a href="#faq">Go to FAQ</a></p>
<section id="faq">FAQ: shipping costs $5.</section>Notes
:target is handy for highlighting the section a reader jumped to from the table of contents. It changes when the address changes, so the browser's Back button switches it too.
See also
- #id — Selects the single element with the given `id` attribute.
- scroll-margin — Extra space kept around an element when the page scrolls to it — so it does not end up under a fixed header.
Related recipes
In the tutorial
- Pseudo-classes — Styles for element states and positions — hover, focus, links, first-child, nth-child, not and form fields.