: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	1.0

Last updated by CSSPortal on: 25th November 2019