CSS :target Pseudo-Class Reference

In the realm of web design, creating dynamic and interactive user experiences is key. One essential tool in achieving this is the :target pseudo-class in CSS. This article will explore the :target pseudo-class in detail, including its definition, usage, syntax, and practical examples, aiming to provide a comprehensive guide for beginners.

I. Introduction

A. Definition of the :target pseudo-class

The :target pseudo-class in CSS is used to style an element that is targeted by a fragment identifier in the URL. In simpler terms, when a user clicks a link that points to an anchor ID within the same page, the corresponding element receives the :target state, allowing for tailored styling.

B. Importance of the :target pseudo-class in web design

Utilizing the :target pseudo-class helps create engaging and intuitive navigation on web pages. For instance, it can be used for showing or hiding content based on user interaction without needing additional JavaScript, making it a lightweight solution for single-page navigation.

II. Browser Support

Fortunately, the :target pseudo-class enjoys wide support across modern browsers, making it a reliable choice for developers. Below is a summary of browser compatibility:

Browser	Version	Support
Chrome	1.0+	✅
Firefox	1.0+	✅
Safari	3.1+	✅
Edge	12.0+	✅
Internet Explorer	8.0+	✅

III. Syntax

A. General syntax for using the :target pseudo-class

The syntax for the :target pseudo-class is straightforward. It typically follows this format:

selector:target {
    property: value;
}

Here, selector represents the element you want to style when it becomes the target, property is the CSS property you want to apply, and value is the value for that property.

IV. Example

A. Simple example demonstrating the use of :target

Let’s consider a basic example where we want to highlight a certain section of a webpage when a corresponding link is clicked. Below is a code snippet implementing the :target pseudo-class:

<html>
<head>
    <style>
        #section1, #section2 {
            display: none;
        }
        #section1:target, #section2:target {
            display: block;
            background-color: azure;
            padding: 20px;
            margin: 10px 0;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <h2>Sections</h2>
    <a href="#section1">Show Section 1</a> | 
    <a href="#section2">Show Section 2</a>

    <div id="section1">
        <h3>Section 1</h3>
        <p>This is the first section.</p>
    </div>

    <div id="section2">
        <h3>Section 2</h3>
        <p>This is the second section.</p>
    </div>
</body>
</html>

In this example, clicking on the links will display the corresponding sections and apply styles as dictated by the :target rule.

V. Demo

A. Interactive demo showcasing various aspects of :target

Below is an interactive demo that illustrates multiple elements using the :target pseudo-class. Users can click the links on the left to toggle the visibility of different sections and see the effect of styles applied through the :target selector:

<html>
<head>
    <style>
        .content {
            display: none;
            transition: all 0.3s;
        }
        .content:target {
            display: block;
            background-color: lightyellow;
            padding: 15px;
            border: 2px solid #333;
            margin: 10px 0;
        }
    </style>
</head>
<body>
    <h1>CSS :target Demo</h1>
    <nav>
        <ul>
            <li><a href="#item1">Item 1</a></li>
            <li><a href="#item2">Item 2</a></li>
            <li><a href="#item3">Item 3</a></li>
        </ul>
    </nav>

    <div id="item1" class="content">
        <h2>Item 1 Content</h2>
        <p>Details about item 1.</p>
    </div>

    <div id="item2" class="content">
        <h2>Item 2 Content</h2>
        <p>Details about item 2.</p>
    </div>

    <div id="item3" class="content">
        <h2>Item 3 Content</h2>
        <p>Details about item 3.</p>
    </div>
</body>
</html>

In this demo, clicking on each item link will bring forth its respective content, enhancing the user experience through smooth transitions.

VI. Related Selectors

A. Brief overview of related pseudo-classes and selectors

While the :target pseudo-class is notable for its functionality, there are several related pseudo-classes and selectors useful for various scenarios:

:hover: Used to apply styles when the mouse hovers over an element.
:focus: Applies styles to an element when it is in focus (e.g., clicked or navigated to).
:active: Styles an element when it is actively being clicked on.
:link and :visited: Used for styling hyperlinks based on their state.

These selectors can work in tandem with the :target pseudo-class to create a rich interactive experience on web pages.

FAQ

1. What happens when no element corresponds to the ID in the URL?: If there isn’t a matching element with the specified ID, no styles will be applied, and the element remains hidden.
2. Can I use :target with multiple elements?: No, the :target pseudo-class can only apply to one specific element at any time, based on the anchor link used.
3. Is the :target pseudo-class accessible for users using keyboard navigation?: Yes, as long as users can access links through keyboard navigation, they can utilize the :target functionality as well.
4. Are there any performance concerns when using :target?: Generally, the performance impact is minimal because the :target pseudo-class is processed by the browser’s CSS engine efficiently.

askthedev.com Latest Articles