CSS | :target Selector - GeeksforGeeks

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>                     

Output:
Before Click on the link:
target1

After Click on the link:
target2

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>                     

Output:
Before Click on the link:
tar1

After Click on the link:
tar2

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

My Personal Notes

Recommended Posts: