How to target components around or within other elements in CSS ?

Last Updated : 27 Jul, 2022

In this article, we will see how can we target components around or within other elements. This task can be achieved by using the target selector.

The target selector in CSS is used to represent a unique element with an id attribute matching the URL’s fragment and It can be used to style the currently active target element. URLs with a # followed by an anchor tag name link to a certain element within a document and the element being linked to is the target element.

Syntax:

:target {
    CSS Property
}

Example 1: In the below example, we will see how would we target components around or within other elements.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>CSS :target Selector</title> 
    <style> 
        body { 
            background-color: lightgrey; 
        } 
          
        button { 
            background-color: #4CAF50; 
            
            /* Green */ 
            border: none; 
            color: white; 
            padding: 15px 32px; 
            text-align: center; 
            text-decoration: none; 
            display: inline-block; 
            font-size: 16px; 
        } 
          
        :target { 
            border: 2px solid black; 
            background-color: grey; 
            color: white; 
            padding: 5px; 
            font-size: 15px; 
            width: 250px; 
            margin-left: 200px; 
        } 
    </style> 
</head> 
  
<body style="text-align:center"> 
    <h1 style="color:green"> 
        GeeksforGeeks 
    </h1> 
    <h3> 
        Targeting the components around  
        or within other elements 
    </h3><br> 
    <p> 
        <button> 
            <a href="#gfg"> 
                Click here to find GeeksforGeeks 
            </a>  
        </button> 
    </p> 
  
    <div id="gfg"> 
        <h3>GeeksforGeeks</h3> 
    </div> 
    <div> 
        <h3>DSA</h3> 
    </div> 
    <div> 
        <h3>JAVA</h3>  
    </div> 
    <div> 
        <h3>Operating System</h3> 
    </div> 
</body> 
</html>

Output:

Example 2: This is another example that displays how would we target components around or within other elements.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>CSS :target Selector</title> 
    <style> 
        button { 
            background-color: #4CAF50; 
            border: none; 
            color: white; 
            padding: 15px 32px; 
            text-align: center; 
            text-decoration: none; 
            display: inline-block; 
            font-size: 16px; 
        } 
        /* CSS property of target selector */ 
          
        :target { 
            border: 2px solid black; 
            background-color: green; 
            color: white; 
            padding: 5px; 
            font-size: 15px; 
        } 
    </style> 
</head> 
  
<body style="text-align:center"> 
    <h1 style="color:green"> 
        GeeksforGeeks 
    </h1> 
    <h3> 
        Targeting the components around  
        or within other elements 
    </h3> 
    <p> 
        <button> 
            <a href="#i1"> 
                Find gfg from paragraph one and make it bold. 
            </a>  
        </button> 
    </p> 
    <p> 
        <button> 
            <a href="#i2"> 
                Find gfg from paragraph two and make it bold. 
            </a>  
        </button> 
    </p> 
  
    <div> 
        <p>This is  
            <i id="i1">gfg</i> paragraph one 
        </p> 
  
    </div> 
    <div> 
        <p> 
           This is <i id="i2">gfg</i> paragraph two. 
        </p> 
    </div> 
</body> 
</html>