: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 | |||||
 |
 |
 |
 |
 |
 |
| 9 | 12 | 1 | 1 | 9.5 | 1.3 |
| Tablets / Mobile | |||||
 |
|
|
|
|
 |
| 2 | 18 | 4 | 10.1 | 2 | X |