Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Role of CSS :target Selector
The CSS :target selector is a powerful pseudo-class that targets an element whose id matches the fragment identifier in the current URL. This allows you to style elements when they are directly accessed through anchor links, creating smooth navigation highlighting and interactive content sections.
Syntax
:target {
/* CSS properties */
}
How :target Works
When a user clicks on a link with a fragment identifier (like #section1), the browser navigates to the element with that id. The :target selector automatically applies styles to that specific element, making it visually distinct.
Example: Highlighting Active Sections
The following example demonstrates how to use :target to highlight tutorial sections when accessed through navigation links −
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Arial, sans-serif;
line-height: 1.6;
}
.nav-link {
color: #007bff;
text-decoration: none;
padding: 5px 10px;
margin: 5px;
border-radius: 4px;
background-color: #f8f9fa;
display: inline-block;
}
.tutorial-section {
padding: 20px;
margin: 10px 0;
border: 1px solid #ddd;
border-radius: 5px;
transition: all 0.3s ease;
}
:target {
background-color: #ff6b35;
color: white;
border: 2px solid #e55a2b;
transform: scale(1.02);
}
</style>
</head>
<body>
<h1>Tutorial Navigation</h1>
<nav>
<a href="#maths" class="nav-link">Mathematics</a>
<a href="#programming" class="nav-link">Programming</a>
<a href="#webdev" class="nav-link">Web Development</a>
<a href="#database" class="nav-link">Database</a>
</nav>
<div class="tutorial-section" id="maths">
<h2>Mathematics Tutorial</h2>
<p>Learn algebra, calculus, and statistics concepts with practical examples and exercises.</p>
</div>
<div class="tutorial-section" id="programming">
<h2>Programming Tutorial</h2>
<p>Master programming fundamentals with Java, Python, and C++ tutorials.</p>
</div>
<div class="tutorial-section" id="webdev">
<h2>Web Development Tutorial</h2>
<p>Build modern websites using HTML, CSS, JavaScript, and popular frameworks.</p>
</div>
<div class="tutorial-section" id="database">
<h2>Database Tutorial</h2>
<p>Learn SQL, database design, and work with popular database management systems.</p>
</div>
</body>
</html>
A navigation menu with four tutorial links appears at the top. When you click any link, the corresponding tutorial section becomes highlighted with an orange background, white text, darker border, and slightly larger scale. The highlighting includes a smooth transition effect.
Key Benefits
- No JavaScript Required: Pure CSS solution for interactive navigation
- Accessibility: Works with keyboard navigation and screen readers
- SEO Friendly: Creates bookmarkable URLs for specific content sections
- Responsive: Automatically adapts to different screen sizes
Conclusion
The :target selector provides an elegant CSS-only solution for creating interactive navigation and highlighting active content sections. It enhances user experience by providing visual feedback when users navigate through page anchors, making content more accessible and engaging.
325 Views
