CSS :target Selector

Posted in CSS Tutorial

Updated on Oct 27, 2024

By Mari Selvan

👁️ 11 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The :target selector in CSS is used to style the element that is the target of a URL’s fragment identifier.

This selector allows you to apply specific styles to an element when it is "targeted" by a hash in the URL, commonly used for in-page navigation or linking to specific sections.

💡 Syntax

The signature of the :target Selector is as follows:

Syntax

Copied

:target {
    /* CSS properties */
}

The :target selector applies styles to an element when its ID matches the fragment identifier in the URL (the part that comes after #).

📝 Example

Here is an example of how to use the :target selector:

☠️ HTML

HTML

Copied

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS :target Selector Example</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Content Navigation</h1>
    <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>

    <div id="section1" class="section">
        <h2>Section 1</h2>
        <p>This is the content for section 1.</p>
    </div>

    <div id="section2" class="section">
        <h2>Section 2</h2>
        <p>This is the content for section 2.</p>
    </div>

    <div id="section3" class="section">
        <h2>Section 3</h2>
        <p>This is the content for section 3.</p>
    </div>
</body>
</html>

🎨 CSS

CSS

Copied

/* Base style for sections */
.section {
    padding: 20px;
    margin: 20px 0;
    background-color: #f0f0f0;
    border-left: 5px solid transparent;
}

/* Highlight the targeted section */
:target {
    background-color: #e0ffe0;
    border-left: 5px solid green;
}

In this example:

When you click a link (e.g., "Go to Section 1"), the browser jumps to the respective section and applies the styles defined by :target.
The targeted section gets a light green background and a green left border, providing visual feedback to the user.

💬 Usage Tips

The :target selector is especially useful for one-page websites or sections with in-page navigation, where specific sections of content are accessed using fragment identifiers.
You can use smooth scrolling in combination with :target to create a smooth user experience when navigating between sections.
The :target selector can be combined with other pseudo-classes and selectors to style the targeted element more dynamically.

⚠️ Common Pitfalls

The :target selector only works when an element's id attribute matches the fragment identifier in the URL. If the element doesn't have an id, or the id does not match the fragment identifier, the selector won’t apply.
Be mindful of users who disable JavaScript or don’t interact with links. Ensure that content is still accessible without the :target styling.

🎉 Conclusion

The :target selector is a handy tool for adding interactive and dynamic styling to elements based on URL fragment identifiers.

It enhances user navigation by providing visual cues to the currently active or targeted section, making it a popular choice for single-page applications and in-page navigation.