How can the target pseudo-class be utilized to replace the 'active' state on navigation across several pages effectively?

Question

How can the target pseudo-class be utilized to replace the 'active' state on navigation across several pages effectively?

Within a large application, I am managing a micro site and looking to implement tertiary navigation with an active state for pages. This involves inserting a single html blob into multiple pages.

My goal is to use an active class to highlight the page in the tertiary navigation that the user is currently on.

<nav>
   <ul>
   <li class="active"><a href="#">Page 1</a></li>
   <li><a href="#">Page 2</a></li>
   <li><a href="#">Page 3</a></li>
   </ul>
</nav>

Since I lack control over the backend application but have full control of html, css, I aim to avoid solutions involving jQuery to detect urls.

The CSS approach would be:

nav li:target {background:#ccc}

Instead of:

nav li.active {background:#ccc}

I have observed similar concepts applied to anchor tags like this. The inquiry is whether it's possible to achieve this for different urls and how to properly utilize the :target class.

Based on feedback, this is my current implementation:

<nav>
   <ul>
   <li><a id="page1" href="page1.html">Page 1</a></li>
   <li><a id="page2" href="page2.html">Page 2</a></li>
   <li><a id="page3" href="page3.html">Page 3</a></li>
</ul>
</nav>

However, this method does not work consistently across multiple pages. For a functioning project example, refer to this GitHub repository.

html css

Answer 1

Answer №1

Your approach to using the target class seems to be reversed based on the example you provided earlier. Currently, you are requesting the target class to highlight the selected link, but in reality, the target pseudo class highlights the content section associated with the selected link. You can see this concept in action on the w3schools site demo here. The content changes when the link is clicked, not the other way around.

If you want your navigation links to be highlighted based on the selection, you will need to dynamically add the 'active' class, most likely using jQuery. I hope this explanation helps clarify things for you.

UPDATE

After our discussion, I reviewed your code and made some improvements.

<!DOCTYPE html>
<html>
<style>
.content:target  {
   background: #ccc;
}
</style>
<body>

<nav>
  <ul>
    <li><a href="page1.html#page1">Page 1</a></li>
    <li><a href="page2.html#page2">Page 2</a></li>
    <li><a href="page3.html#page3">Page 3</a></li>
  </ul>
</nav>

<h1>This is Page one</h1>

<div class="content" name="page1" id="page1">This is Page ONE paragraph</div>

</body>
</html>

You were assigning an ID to the anchor tags which was unnecessary since the nav links don't require an ID. Instead, the ID value should be passed in the URL as #page1. Additionally, your target CSS refers to the content section, not the navigation menu. Follow this setup for the other pages for optimal functionality.

Answer 2

Your approach to using the target class seems to be reversed based on the example you provided earlier. Currently, you are requesting the target class to highlight the selected link, but in reality, the target pseudo class highlights the content section associated with the selected link. You can see this concept in action on the w3schools site demo here. The content changes when the link is clicked, not the other way around.

If you want your navigation links to be highlighted based on the selection, you will need to dynamically add the 'active' class, most likely using jQuery. I hope this explanation helps clarify things for you.

UPDATE

After our discussion, I reviewed your code and made some improvements.

<!DOCTYPE html>
<html>
<style>
.content:target  {
   background: #ccc;
}
</style>
<body>

<nav>
  <ul>
    <li><a href="page1.html#page1">Page 1</a></li>
    <li><a href="page2.html#page2">Page 2</a></li>
    <li><a href="page3.html#page3">Page 3</a></li>
  </ul>
</nav>

<h1>This is Page one</h1>

<div class="content" name="page1" id="page1">This is Page ONE paragraph</div>

</body>
</html>

You were assigning an ID to the anchor tags which was unnecessary since the nav links don't require an ID. Instead, the ID value should be passed in the URL as #page1. Additionally, your target CSS refers to the content section, not the navigation menu. Follow this setup for the other pages for optimal functionality.

Answer 3

Answer №2

Refer to Section 6.6.2 on The target pseudo-class :target

Certain URIs point to specific locations within a resource, indicated by the presence of a "number sign" (#) followed by an anchor identifier (also known as the fragment identifier).

URIs containing fragment identifiers direct to a particular element within the document, referred to as the target element.

The target element can be selected using the :target pseudo-class. In cases where the URI lacks a fragment identifier, there is no designated target element in the document.

To apply styling based on this concept, you can use:

 nav li:target {
   background: #ccc
 }

<nav>
  <ul>
    <li id="page1"><a href="#page1">Page 1</a></li>
    <li id="page2"><a href="#page2">Page 2</a></li>
    <li id="page3"><a href="#page3">Page 3</a></li>
  </ul>
</nav>

Answer 4

Refer to Section 6.6.2 on The target pseudo-class :target

Certain URIs point to specific locations within a resource, indicated by the presence of a "number sign" (#) followed by an anchor identifier (also known as the fragment identifier).

URIs containing fragment identifiers direct to a particular element within the document, referred to as the target element.

The target element can be selected using the :target pseudo-class. In cases where the URI lacks a fragment identifier, there is no designated target element in the document.

To apply styling based on this concept, you can use:

 nav li:target {
   background: #ccc
 }

<nav>
  <ul>
    <li id="page1"><a href="#page1">Page 1</a></li>
    <li id="page2"><a href="#page2">Page 2</a></li>
    <li id="page3"><a href="#page3">Page 3</a></li>
  </ul>
</nav>

How can the target pseudo-class be utilized to replace the 'active' state on navigation across several pages effectively?

Answer №1

Answer №2

Similar questions

Displaying text and concealing image when hovering over a column in an angular2 table

What is the process for connecting CSS to an HTML page?

"Create a dynamic and user-friendly responsive navbar using Bootstrap with toggle

Is there a way for me to utilize the Bootstrap carousel without it adjusting the height as the user transitions from slide 1 to slide 2?

Tips for creating a "sticky" button in Angular that reveals a menu when clicked

Conceal specific pages within the DataTable without deleting them

Creating Scalable Vector Graphics without utilizing identifiers

React: Submit button not triggering form submission despite having a valid submit event handler and correct syntax

Is there a way to create a multi-page website simulation using jQuery?

Enhance VideoJS using custom Ionic icons in a NextJS environment

Utilizing multiple class names in Material UI with identical definitions

Top strategies for efficiently managing the loading of extensive PHP pages using Jquery, Ajax, HTML, and other tools

When using HTML select, text alignment may not be centered properly in the Chrome

Can markers be positioned on top of scroll bars?

One effective way to redirect after a PUT request and display a one-time message

Switch up the Thumbnail Image based on the selected category

How can I dynamically update a div without refreshing the page by using an onclick event on a

Tips on aligning text to the left on mobile devices using CSS and HTML

Vue 3 has officially deprecated the use of ::v-deep as a combinator. Going forward, please utilize ::v-deep(<inner-selector>) instead

Within the flask framework, I am experiencing an issue where paragraphs are being overwritten. My goal is to find a