:target pseudo-class is used to style elements pointed to by URL fragment identifiers. 1. When the link points to the ID in the page, the corresponding element becomes the target and applies a special style; 2. Can be used to highlight content, create tabs, or display/hide elements; 3. In the example, the target block is displayed and others are hidden through section:target; 4. The actual application includes FAQ, tab page, and content highlighting; 5. Support animation enhancement effects without JavaScript; 6. Pay attention to ID uniqueness and only one element at a time is the target; 7. All modern browsers support this feature.
The :target pseudo-class in CSS is used to style the element that is the target of a fragment identifier (the part of the URL after the # ). When a link points to an ID on the same page, the element with that ID becomes the "target", and :target allows you to apply special styles to it.
This is useful for highlighting content, creating simple tabbed interfaces, or showing/hiding elements without JavaScript.
? Basic :target Example
Here's a simple example showing how :target works:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>:target Example</title>
<style>
/* Hide all sections by default */
section {
display: none;
padding: 20px;
border: 1px solid #ccc;
margin-top: 10px;
}
/* Show only the targeted section */
section:target {
display: block;
background-color: #f0f8ff;
border-color: #007cba;
}
/* Style the navigation */
nav a {
margin: 0 10px;
text-decoration: none;
color: #007cba;
}
nav a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<nav>
<a href="#home">Home</a>
<a href="#about">About</a>
<a href="#contact">Contact</a>
</nav>
<section id="home">
<h2>Home</h2>
<p>Welcome to the home section!</p>
</section>
<section id="about">
<h2>About</h2>
<p>Learn more about us here.</p>
</section>
<section id="contact">
<h2>Contact</h2>
<p>Get in touch with us.</p>
</section>
</body>
</html>
? How It Works
- When you click a link like
<a href="#about"> , the browser scrolls to the element with id="about" . - That element now matches the
:target pseudo-class. - The CSS rule
section:target { display: block; } makes only that section visible. - This lets you simulate a simple single-page navigation or according effect using only HTML and CSS.
? Practical Use Cases
- FAQ pages : Click a question to reveal its answer.
- Tabs or panels : Show one panel at a time.
- Highlighting referenced content : Add a yellow background or animation to the targeted section.
Example enhancement with animation:
section:target {
display: block;
animation: fadeIn 0.5s ease-in-out;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
?? Notes
- Only one element can be the target at a time.
- The
:target selector works on any element with an id that matches the URL hash.
- Always ensure IDs are unique.
Basically, :target gives you a lightweight way to create dynamic effects without JavaScript. It's well supported in all modern browsers.
The above is the detailed content of css :target pseudo-class example. For more information, please follow other related articles on the PHP Chinese website!