Skip to content
Related Articles
Open in App
Not now

Related Articles

CSS | :target Selector

Improve Article
Save Article
  • Last Updated : 23 Aug, 2022
Improve Article
Save Article

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:

 target1 

After Click on the link:

 target2 

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:

 tar1 

After Click on the link:

 tar2 

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

My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!