CSS3 :target Selector Usage

The :target selector in CSS3 is a powerful tool that allows you to apply styles based on the current URL fragment identifier. It enables developers to create dynamic, interactive web pages by targeting elements based on user actions, such as clicks on links or buttons that change the URL hash. In this article, we will delve into the definition, usage, examples, and related selectors of the :target pseudo-class.

Definition of :target Selector

The :target selector is used to style an element that is targeted by the fragment identifier in the URL. When a user clicks on a link with a hash (#) followed by an element’s id, the browser scrolls to that element, and the :target selector can apply specific styles to it. This makes it a useful tool for creating features like tabs, modals, or toggleable content sections.

Browser Compatibility

The :target selector is well-supported across all modern browsers, including:

Browser	Support
Chrome	Supported
Firefox	Supported
Safari	Supported
Edge	Supported
Internet Explorer	Not Supported

How to Use the :target Selector

To use the :target selector, you need to have:

1. An element with a unique id that you want to target.
2. A link that directs to that id using a hash (#).
3. CSS rules for the :target selector applied to your targeted element.

Here’s a simple structure:

Go to Section 1
Go to Section 2

This is Section 1
This is Section 2


#section1:target {
    background-color: yellow;
}
#section2:target {
    background-color: lightblue;
}

Example of :target Selector

Let’s look at a basic example to understand how the :target selector functions.

    
    
    
    


    Select Target 1
    Select Target 2

    
This is Target 1
    
This is Target 2

In this example, clicking the links will change the background color of the targeted div.

More Examples

Let’s explore some more practical examples of using the :target selector.

    
    
    
    


    
More Examples of :target Selector
    

    
This is the Information section.
    
This is the Gallery section.
    
This is the Contact section.

In this example, clicking on the different links reveals respective content sections, styling them in a different background when targeted.

Summary

The :target selector in CSS3 provides a seamless way to create dynamic content on your web pages by responding to user interactions through URL hash changes. By using it effectively, you can enhance user experience and create interactive features without relying heavily on JavaScript. Throughout this article, we explored its definition, usage, compatibility, and provided numerous examples that illustrate its capabilities.

Related CSS Selectors

Here are some relevant selectors you may want to explore further:

• :hover: Applies styles when the user hovers over an element.
• :focus: Applies styles to elements that have focus, such as input fields.
• :nth-child(): Selects elements based on their order in a parent container.
• :first-child: Selects the first child element of a parent.
• :last-child: Selects the last child element of a parent.

FAQs

Q: What happens if multiple elements share the same ID?

A: IDs must be unique within a document. If multiple elements use the same ID, only the first element is targeted by the :target selector.

Q: Can I use :target in combinations with other selectors?

A: Yes, you can combine :target with other selectors to create more specific styles.

Q: Does using the :target selector affect page performance?

A: No, the :target selector does not significantly affect performance, as it is a purely CSS-based solution.

Q: Is the :target selector accessible?

A: Yes, if used correctly, the :target selector can enhance accessibility by providing a more interactive experience for users.