CSS Selector :target
A fragment identifier can be added to a URL to navigate directly to an element based its id attribute. For example, example.html#myelement goes to the element whose id is 'myelement' in example.html.
:target selector matches the element that
the URL fragment identifier refers to.
Summary
- CSS Version
- 3
CSS Syntax
:target {
style properties
}
Browser compatibility
 |
 |
 |
 |
 |
|
|---|---|---|---|---|---|
:target |
Yes | 9.0 | Yes | Yes | Yes |
Example
An example showing how to use :target CSS selector.
<!DOCTYPE html>
<html>
<head>
<style>
:target{<!-- w ww . j a v a 2 s .co m-->
border: 1px solid red;
background-color: gray;
}
</style>
</head>
<body>
<p>Click on the links in order to see the effect.</p>
<p><a href="#p1">Paragraph 1</a></p>
<p><a href="#p2">Paragraph 2</a></p>
<br/><br/><br/><br/><br/><br/><br/><br/>
<p id="p1">>Paragraph 1</b></p>
<p>this is a paragraph.</p>
<p>this is a paragraph.</p>
<p>this is a paragraph.</p>
<p>this is a paragraph.</p>
<p>this is a paragraph.</p>
<p id="p2"><b>Paragraph 2</b></p>
</body>
</html>