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:
<!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> |
chevron_right
filter_none
Output:
Before Click on the link:
After Click on the link:
Example 2:
<!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> |
chevron_right
filter_none
Output:
Before Click on the link:
After Click on the link:
Supported Browsers: The browser supported by :target Selector are listed below:
- Apple Safari 3.2
- Google Chrome 4.0
- Firefox 3.5
- Opera 9.6
- Internet Explorer 9.0
