CSS :target Pseudo Class

The :target pseudo-class styles an element that is the target of an internal link in a document.

It represents the target element with an id matching the URL's fragment.

Version

CSS3

Syntax

:target {
css declarations;
}

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      :target {
      border: 2px solid #1c87c9;
      background-color: #eeeeee;
      }
    </style>
  </head>
  <body>
    <h2>:target selector example</h2>
    <p>
      <a href="#example1">Jump to Paragraph 1</a>
    </p>
    <p>
      <a href="#example2">Jump to Paragraph 2</a>
    </p>
    <p id="example1">
      <strong>Paragraph 1</strong>
    </p>
    <p id="example2">
      <strong>Paragraph 2</strong>
    </p>
  </body>
</html>

Practice Your Knowledge

:target pseudo class represents the target element with an




Related articles