:target
Quick Summary for :target
The :target CSS pseudo-class represents a unique element (the target element) with an id matching the URL's fragment.
Code Usage for :target
/* Selects an element with an ID matching the current URL's fragment */ :target {   border: 2px solid black; } 
More Details for :target

: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

A table of contents

The :target pseudo-class can be used to highlight the portion of a page that has been linked to from a table of contents.

HTML
<h3>Table of Contents</h3> <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>  <h3>My Fun Article</h3> <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> 
CSS
p:target {   background-color: gold; }  /* Add a pseudo-element inside the target element */ p:target::before {   font: 70% sans-serif;   content: "►";   color: limegreen;   margin-right: .25em; }  /* Style italic elements within the target element */ p:target i {   color: red; } 
Result

Pure-CSS lightbox

You can use the :target pseudo-class to create a lightbox without using any JavaScript. This technique relies on the ability of anchor links to point to elements that are initially hidden on the page. Once targeted, the CSS changes their display so that they are shown.

Note: A more complete pure-CSS lightbox based on the :target pseudo-class is available on GitHub (demo).

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

Specification
HTML Standard # selector-target
Selectors Level 4 # the-target-pseudo

See also

Using the :target pseudo-class in selectors

Last modified: Jan 24, 2022, by MDN contributors

Select your preferred language English (US)EspañolFrançais日本語Português (do Brasil)Русский中文 (简体)正體中文 (繁體) Change language

No Items Found.

Add Comment
Type in a Nick Name here
 
Other Categories in CSS
css
Search CSS
Search CSS by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code here, mostly for my reference. Also if i find a good link, i usually add it here and then forget about it. more...

Subscribe to weekly updates about things i have added to the site or thought interesting during the last week.

You could also follow me on twitter or not... does anyone even use twitter anymore?

If you found something useful or like my work, you can buy me a coffee here. Mmm Coffee. ☕

❤️👩‍💻🎮

🪦 2000 - 16 Oct 2022 - Boots
Random Quote
I believe that success can be measured in the number of uncomfortable conversations you're willing to have.
Unknown
Random CSS Property

border-inline-start-style

The border-inline-start-style CSS property defines the style of the logical inline start border of an element, which maps to a physical border style depending on the element's writing mode, directionality, and text orientation. It corresponds to the border-top-style, border-right-style, border-bottom-style, or border-left-style property depending on the values defined for writing-mode, direction, and text-orientation.
border-inline-start-style css reference