CSS :target

The CSS :target pseudo-class is used to style an element that is the target of a fragment identifier (hash link) in a URL. This is particularly useful for styling content that is dynamically navigated to, such as sections, tabs, or modals.

The syntax for the :target pseudo-class is:

</>
Copy
selector:target {
    property: value;
}

Where:

ParameterDescription
selectorThe element to which the :target pseudo-class will apply when it is targeted by a fragment identifier in the URL.
propertyThe CSS property to style the targeted element.
valueThe value assigned to the CSS property.

Examples

1. Highlighting a Targeted Section

In this example, a section becomes highlighted with a yellow background when it is targeted by a URL fragment.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        section {
            padding: 10px;
            border: 1px solid gray;
            margin-bottom: 10px;
        }

        section:target {
            background-color: yellow;
        }
    </style>
</head>
<body>
    <nav>
        <a href="#section1">Go to Section 1</a> | 
        <a href="#section2">Go to Section 2</a> | 
        <a href="#section3">Go to Section 3</a>
    </nav>

    <section id="section1">This is Section 1</section>
    <section id="section2">This is Section 2</section>
    <section id="section3">This is Section 3</section>
</body>
</html>

2. Targeting Tabs in a Tabbed Interface

Here, clicking a tab link highlights the corresponding tab content using the :target pseudo-class.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        .tab-content {
            display: none;
            padding: 10px;
            border: 1px solid gray;
            margin-top: 10px;
        }

        .tab-content:target {
            display: block;
            background-color: lightblue;
        }
    </style>
</head>
<body>
    <nav>
        <a href="#tab1">Tab 1</a> | 
        <a href="#tab2">Tab 2</a> | 
        <a href="#tab3">Tab 3</a>
    </nav>

    <div id="tab1" class="tab-content">Content for Tab 1</div>
    <div id="tab2" class="tab-content">Content for Tab 2</div>
    <div id="tab3" class="tab-content">Content for Tab 3</div>
</body>
</html>

3. Expanding Targeted Content in a FAQ

In this example, clicking a question link expands its corresponding answer using the :target pseudo-class.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        .faq-answer {
            display: none;
            padding: 10px;
            border: 1px solid gray;
            margin-top: 5px;
        }

        .faq-answer:target {
            display: block;
            background-color: lightyellow;
        }
    </style>
</head>
<body>
    <h3>FAQ</h3>
    <div>
        <a href="#answer1">What is CSS?</a>
        <div id="answer1" class="faq-answer">CSS stands for Cascading Style Sheets.</div>
    </div>
    <div>
        <a href="#answer2">What is HTML?</a>
        <div id="answer2" class="faq-answer">HTML stands for HyperText Markup Language.</div>
    </div>
</body>
</html>

4. Highlighting Targeted Images

In this example, clicking on an image link highlights the corresponding image with a border.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        img {
            border: 2px solid transparent;
            margin: 5px;
        }

        img:target {
            border: 2px solid red;
        }
    </style>
</head>
<body>
    <a href="#img1">Image 1</a> | 
    <a href="#img2">Image 2</a> | 
    <a href="#img3">Image 3</a>

    <div>
        <img id="img1" src="/img/lion.jpg" alt="Image 1">
        <img id="img2" src="/img/dragonfly.jpg" alt="Image 2">
        <img id="img3" src="/img/logo.png" alt="Image 3">
    </div>
</body>
</html>