:target CSS Pseudo Class

Description

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.

Syntax

element:target { ... }

Example

<ul> 
<li><a href="#h1">Section 1</a></li>
<li><a href="#h2">Section 2</a></li>
</ul>
<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

Desktop
Explorer Edge Chrome Firefox Opera Safari
912119.51.3
Tablets / Mobile
Android Chrome Firefox Opera Safari Samsung
218410.12X