CSS | :target Selector
The target selector is used to represent a unique element (the target element) with an id matching the URL’s fragment. It can be used to style the current active target element. URLs with a # followed by an anchor name link to a certain element within a document. The element being linked to is the target element.
Syntax:
:target {
// CSS Property
} Example 1:
HTML
<!DOCTYPE html><html><head> <title>CSS | :target Selector</title> <style> /* CSS property of target selector */ :target { border: 2px solid #D4D4D4; background-color: green; color: white; padding: 10px; font-size: 20px; } </style></head><body style="text-align:center"> <h2> :target selector </h2> <p> <a href="#geek"> Jump to Algorithms </a> </p> <p id="geek"> <b>Algorithms</b> </p></body></html> |
Output:
Before Click on the link:
After Click on the link:
Example 2:
HTML
<!DOCTYPE html><html><head> <title>:target Selector</title> <style> .tab div { display: none; } .tab div:target { display: block; color: white; background: green; padding: 5px; margin: 20px 5px; } </style></head><body style="text-align:center"> <h2> :target selector </h2> <div class="tab"> <a href="#geek">Geeks Classes</a> <div id="geek"> <h3>Welcome to Geeks Classes.</h3> <p>Hello World!</p> </div> </div></body></html> |
Output:
Before Click on the link:
After Click on the link:
Supported Browsers: The browser supported by :target Selector are listed below:
- Apple Safari 1.3
- Google Chrome 1.0
- Edge 12.0
- Firefox 1.0
- Opera 9.5
Please Login to comment...