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...