:target

The :target CSS pseudo-class represents a unique element (the target element) with an id matching the URL's fragment.

/* Selects an element with an ID matching the current URL's fragment */
:target {
  border: 2px solid black;
}

For example, the following URL has a fragment (denoted by the # sign) that points to an element called section2:

http://www.example.com/index.html#section2

The following element would be selected by a :target selector when the current URL is equal to the above:

<section id="section2">Example</section>

Syntax

:target

Examples

Basic example

HTML

<ol>
 <li><a href="#p1">Jump to the first paragraph!</a></li>
 <li><a href="#p2">Jump to the second paragraph!</a></li>
 <li><a href="#nowhere">This link goes nowhere,
   because the target doesn't exist.</a></li>
</ol>
<p id="p1">You can target <i>this paragraph</i> using a
  URL fragment. Click on the link above to try out!</p>
<p id="p2">This is <i>another paragraph</i>, also accessible
  from the links above. Isn't that delightful?</p></pre>

CSS

:target {
  box-shadow: 0 0 2px gray;
}
/* You can use pseudo-elements inside a target element */
:target::before {
  font: 70% sans-serif;
  content: "►";
  color: gray;
  margin-right: .25em;
}
/* You can apply special styles to elements within a target element */
:target i {
  color: orange;
}

Result

Pure-CSS lightbox

HTML

<ul>
  <li><a href="#example1">Open example #1</a></li>
  <li><a href="#example2">Open example #2</a></li>
</ul>
<div class="lightbox" id="example1">
  <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>
<div class="lightbox" id="example2">
  <figure>
    <a href="#" class="close"></a>
    <figcaption>Cras risus odio, pharetra nec ultricies et,
      mollis ac augue. Nunc et diam quis sapien dignissim auctor.
      Quisque quis neque arcu, nec gravida magna.</figcaption>
  </figure>
</div>

CSS

/* 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: lightpink;
}
/* 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;
}

Result

Specifications

Browser compatibility

See also

• Using the :target pseudo-class in selectors