CSS :target Pseudo Class
The :target CSS pseudo-class selects the elements that are the target of an internal link. Read about the pseudo-class and practice with examples.
The :target pseudo-class matches an element whose id equals the fragment of the current URL — the part after the #. When you visit a URL like page.html#section2, the element with id="section2" becomes the target, and :target lets you style it.
This page explains how :target works, when to reach for it, its limitations, and four practical patterns you can build with no JavaScript: an in-page highlight, a tabbed menu, a modal box, and a lightbox.
How :target works
The browser tracks one target element per page — the element whose id matches the current URL fragment. Clicking a same-page link such as <a href="#section2"> updates the fragment, which:
- scrolls the matching element into view, and
- makes that element match
:target, applying any styles you wrote for it.
Because navigating to a fragment is a real history entry, the back button works as an "undo": it returns to the previous fragment (or to no fragment), so a :target-driven menu, modal, or lightbox closes itself when the user presses Back.
/* Style the element currently referenced by the URL fragment */
:target {
border: 2px solid #1c87c9;
background-color: #eee;
}A few things worth knowing:
- Only one element can be the target at a time — the fragment is a single value, so
:targetstyles at most one element on the page. - It is a stateful selector. The state lives in the URL, not in markup or JavaScript, which is exactly why it can drive interactive widgets without scripting.
- A bare
#clears the target. Linking tohref="#"(orhref="#nonexistent") removes the match, which is how the "close" buttons in the modal and lightbox examples below work.
When to use it
Reach for :target when you want lightweight, script-free interactivity that is naturally tied to the URL:
- Highlighting the destination of a same-page jump link (footnotes, glossary entries, a table of contents).
- Show/hide widgets — tabs, accordions, modals, lightboxes — where a shareable or bookmarkable URL is a bonus.
Prefer JavaScript (or native elements like <details> and <dialog>) when you need the open state to not change the URL, when you must trap focus for accessibility, or when several panels must be open at once.
Accessibility note: because
:targettoggles visibility through navigation, keyboard and screen-reader users move focus to the targeted element automatically — a point in its favor. But it cannot trap focus inside a modal, so for real dialogs the native<dialog>element is the more robust choice.
:target is a pseudo-class like :hover and :focus; for a broader tour of selectors, see CSS Selectors.
Syntax
:target {
/* CSS declarations */
}Version
:target is widely supported in all modern browsers. It is defined in:
Example: highlighting a jump target
Click a link, and the matching paragraph gets a border and background because it becomes the :target:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
:target {
border: 2px solid #1c87c9;
background-color: #eeeeee;
}
</style>
</head>
<body>
<h2>:target selector example</h2>
<p>
<a href="#example1">Jump to Paragraph 1</a>
</p>
<p>
<a href="#example2">Jump to Paragraph 2</a>
</p>
<p id="example1">
<strong>Paragraph 1</strong>
</p>
<p id="example2">
<strong>Paragraph 2</strong>
</p>
</body>
</html>Example: a tabbed menu
Each tab link points to a hidden panel. Only the panel whose id matches the fragment is shown, so the visible "tab" is whichever one you last clicked:
<!DOCTYPE html>
<html>
<head>
<style>
.tab-menu div {
display: none;
background-color: #f5f5f5;
padding: 0 20px 20px;
}
.tab-menu a {
text-decoration: none;
padding: 10px;
margin: 20px 0;
display: inline-block;
}
.tab-menu div:target {
display: block;
}
</style>
</head>
<body>
<h1>:target selector example</h1>
<div class="tab-menu">
<a href="#html">HTML</a>
<a href="#css">CSS</a>
<a href="#php">PHP</a>
<div id="html">
<h2>
<a href="https://www.w3docs.com/learn-html.html">Learn HTML</a>
</h2>
<p>HTML-Hyper Text Markup Language
</p>
</div>
<div id="css">
<h2>
<a href="https://www.w3docs.com/learn-css.html">Learn CSS</a>
</h2>
<p>CSS-Cascading Style Sheets
</p>
</div>
<div id="php">
<h2>
<a href="https://www.w3docs.com/learn-php.html">Learn PHP</a>
</h2>
<p>PHP-Hypertext Preprocessor
</p>
</div>
</div>
</body>
</html>Example: a modal box
The .modal is hidden by default and only displayed when it is the :target. The "Open Modal" link sets the fragment to #modal; the close button links to #, which clears the target and hides the modal again:
<!DOCTYPE html>
<html>
<head>
<style>
h1+a {
text-decoration: none;
padding: 10px 20px;
background-color: #8ebf42;
color: #ffffff;
font-family: sans-serif;
}
/* Add animation (Chrome, Safari, Opera) */
@-webkit-keyframes example {
from {
top: -100px;
opacity: 0;
}
to {
top: 0px;
opacity: 1;
}
}
/* Add animation (Standard syntax) */
@keyframes example {
from {
top: -100px;
opacity: 0;
}
to {
top: 0px;
opacity: 1;
}
}
/* The modal's background */
.modal {
display: none;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.4);
}
/* Display the modal when targeted */
.modal:target {
display: table;
position: absolute;
}
/* The modal box */
.modal-dialog {
display: table-cell;
vertical-align: middle;
}
/* The modal's content */
.modal-dialog .modal-content {
margin: auto;
background-color: #f3f3f3;
position: relative;
padding: 0;
outline: 0;
border: 1px #777 solid;
text-align: justify;
width: 80%;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
/* Add animation */
-webkit-animation-name: example;
/* Chrome, Safari, Opera */
-webkit-animation-duration: 0.5s;
/* Chrome, Safari, Opera */
animation-name: example;
animation-duration: 0.5s;
}
/* The button used to close the modal */
.closebtn {
text-decoration: none;
float: right;
font-size: 35px;
font-weight: bold;
color: #fff;
}
.closebtn:hover,
.closebtn:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.container {
padding: 2px 16px;
text-align: center;
line-height: 1.6;
}
header {
background-color: #337ab7;
font-size: 25px;
color: white;
}
header h2 {
text-align: left;
}
footer {
background-color: #337ab7;
font-size: 20px;
color: white;
}
footer p {
text-align: right;
}
</style>
</head>
<body>
<h1>:target selector example</h1>
<a href="#modal">Open Modal</a>
<div id="modal" class="modal">
<div class="modal-dialog">
<div class="modal-content">
<header class="container">
<a href="#" class="closebtn">×</a>
<h2>Header</h2>
</header>
<div class="container">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</div>
<footer class="container">
<p>Footer</p>
</footer>
</div>
</div>
</div>
</body>
</html>There is a slight difference between modal boxes and lightboxes. A lightbox can be closed by clicking the dimmed overlay outside the pop-up, while a modal box is closed only by interacting inside it (here, the close button).
Example: a lightbox
The lightbox works the same way as the modal, but a full-screen overlay (.close::before) sits behind the content and also links to #, so clicking anywhere outside the figure closes it:
<!DOCTYPE html>
<html>
<head>
<style>
h1+a {
background-color: #8ebf42;
padding: 20px 40px;
color: #ffffff;
text-decoration: none;
font-size: 20px;
margin: 15px 0;
display: inline-block;
}
/* Unopened lightbox */
.lightbox {
display: none;
}
/* Opened lightbox */
.lightbox:target {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* Lightbox content */
.lightbox figcaption {
width: 25rem;
position: relative;
padding: 1.5em;
background-color: #8ebf42;
}
/* Close button */
.lightbox .close {
position: relative;
display: block;
}
.lightbox .close::after {
right: -1rem;
top: -1rem;
width: 2rem;
height: 2rem;
position: absolute;
display: flex;
z-index: 1;
align-items: center;
justify-content: center;
background-color: black;
border-radius: 50%;
color: white;
content: "×";
cursor: pointer;
}
/* Lightbox overlay */
.lightbox .close::before {
left: 0;
top: 0;
width: 100%;
height: 100%;
position: fixed;
background-color: rgba(0, 0, 0, .7);
content: "";
cursor: default;
}
</style>
</head>
<body>
<h1>:target selector example</h1>
<a href="#lightbox">Open Lightbox</a>
<div class="lightbox" id="lightbox">
<figure>
<a href="#" class="close"></a>
<figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec felis enim, placerat id eleifend eu, semper vel sem.
</figcaption>
</figure>
</div>
</body>
</html>Related selectors
:hoverand:focus— other interactive pseudo-classes for styling user-driven states.:not()— useful for styling everything except the current target, e.g..modal:not(:target).:rootand:empty— more structural pseudo-classes.- CSS Selectors — a complete overview of selector types.