:target CSS Pseudo Class


To go to the selected fragment of the document, the symbol # is written in the address and the identifier name is indicated. For example, at the address 'https://www.cssportal.com/pseudo-class/target.php#example , a transition occurs to the element whose id attribute is set as 'example'. Such an address entry is called a "target element". The :target pseudo-class is applied to the target element, in other words, to the identifier that is specified in the address bar of the browser.


element:target { ... }


<li><a href="#h1">Section 1</a></li>
<li><a href="#h2">Section 2</a></li>
<h2 id="h1">Section 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,</p>
<h2 id="h2">Section 2</h2>
<p>quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
h2:target { 
background: #fc0;
padding: 3px;

Browser Support

Explorer Edge Chrome Firefox Opera Safari
Tablets / Mobile
Android Chrome Firefox Opera Safari Samsung

Last updated by CSSPortal on: 25th November 2019