A Lightbox With :target
pure css 2008 still worksA modal overlay shown by the :target pseudo-class when the URL fragment points at it.
In 2026: Clicking a link to #id changes the URL fragment, :target matches the element with that id, and CSS reveals it. Browsers still support it, and because the state lives in the URL it adds a real back-button entry. It powered CSS-only modals and tab sets before anyone reached for script.
Where it came from: The :target pseudo-class, CSS Selectors Level 3, W3C, 2001. Popularised for tabs and lightboxes by Chris Coyier and Roman Komarov around 2012. MDN ↗
<!DOCTYPE html>
<html>
<head>
<!-- The base keeps the #shot link resolving inside this sandboxed preview.
You do not need it on your own page, delete this line there. -->
<base href="about:srcdoc">
<style>
.lb { position: fixed; top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0,0,0,.8);
display: none; align-items: center; justify-content: center; }
.lb:target { display: flex; }
.lb .card { background: #fff; color: #12233a; padding: 28px; max-width: 300px; }
.lb .close { display: inline-block; margin-top: 12px; color: #c0392b; }
</style>
</head>
<body>
<p><a href="#shot">Open the lightbox</a></p>
<div class="lb" id="shot">
<div class="card">
A modal with no JavaScript. The link sets the URL fragment to this box's id,
:target matches, and the box appears.
<a class="close" href="#">Close</a>
</div>
</div>
</body>
</html>