CSS | :target Selector

Last Updated : 21 Dec, 2018

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>                    