CSS :target - Target And Style Part of a Web Page or Specific Element

The target category of pseudo-class includes one class only, that is :target.

The CSS :target pseudo-class is used when we need to target and style some part of a web page, or a specific element in a web page.

When we create a Web page, it may contain a Uniform Resource Identifier (URI) that refers to a location within the page. This kind of URI ends with # followed by some specified name/number, which is also known as an anchor identifier or fragment identifier.

CSS :target - Target Specific Element within a Web Page

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      :target {background-color: teal; padding: 10px; color: white;}
   </style>
</head>
<body>
   
   <p>Table of content:</p>
   <ul>
      <li><a href="#contentOne">Product Name</a></li>
      <li><a href="#contentTwo">Product Description</a></li>
      <li><a href="#contentThree">Product Price</a></li>
   </ul>

   <p id="contentOne"><b>Product Name:</b> XPS 17 Laptop</p>
   <p id="contentTwo"><b>Product Description:</b> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sequi provident quod natus voluptatibus asperiores..</p>
   <p id="contentThree"><b>Product Price:</b>$4394</p>
   
</body>
</html>

Output

Table of content:

Product Name
Product Description
Product Price

Product Name: XPS 17 Laptop

Product Description: Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sequi provident quod natus voluptatibus asperiores..

Product Price:$4394

Click on any of the three links, to target and style its specified section within the page.

Use :target to Display Only Targeted Element

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      .container div{display: none;}
      .container div:target {display: block; background-color: teal; padding: 10px; color: white;}
   </style>
</head>
<body>
   
<div class="container">
   <p>Table of content:</p>
   <ul>
      <li><a href="#1">Product Name</a></li>
      <li><a href="#2">Product Description</a></li>
      <li><a href="#3">Product Price</a></li>
   </ul>

   <div id="1">
      <p><b>Product Name:</b> XPS 17 Laptop</p>
   </div>
   <div id="2">
      <p><b>Product Description:</b> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sequi provident quod natus voluptatibus asperiores..</p>
   </div>
   <div id="3">
      <p><b>Product Price:</b> $4394</p>
   </div>
</div>
   
</body>
</html>

Output

Table of content:

Product Name
Product Description
Product Price

Product Name: XPS 17 Laptop

Product Description: Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sequi provident quod natus voluptatibus asperiores..

Product Price: $4394

Use CSS :target to Create a Modal Box

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      .modal {display: none; position: fixed;}
      .modal:target {display: block; position: relative;}
      .modal_container {width: 70%; margin: auto; background-color: #ccc; padding: 10px; box-shadow: 0 3px 8px 0 gray;}
      .closebtn {text-decoration: none; float: right; font-size: 30px; color: red;}
   </style>
</head>
<body>

<a href="#4">Display Course Detail</a>

<div id="4" class="modal">
   <div class="modal_container">
      <a href="#" class="closebtn">x</a>
      <h2>Course Description</h2>
      <hr/>
      <p><b>Course Name: </b> Data Science with Python</p>
      <p><b>Course Duration: </b>6 Months</p>
      <p><b>Course Fee: </b>Free</p>
  </div>
</div>

</body>
</html>

Output

Display Course Detail

Click on the Display Course Detail to open the modal box that shows the description of the course.

CSS Online Test

« Previous Tutorial Next Tutorial »