How can you highlight the current section in a menu using :target?

Q: How can you highlight the current section in a menu using :target?

The `:target` pseudo-class in CSS allows you to style an element that matches the current URL fragment identifier (the part after the `#` symbol). This is especially useful for highlighting the current section in a menu or single-page navigation. `:target` selects the element whose ID matches the fragment in the URL (e.g., `#about`). Useful for single-page websites with internal anchor links. You can apply background color, border, or text effects to the active section. /* Default section style */ section { padding: 20px; border: 2px solid transparent; margin: 10px 0; } /* Highlight the section when it is targeted */ section:target { border-color: dodgerblue; background-color: lightblue; } /* Navigation styling */ nav a { margin-right: 10px; text-decoration: none; color: darkblue; } nav a:hover { text-decoration: underline; } Home About Contact Home Section About Section Contact Section In this example, when you click on the 'About' link, the URL changes to include `#about`, and the corresponding section is highlighted with a blue border and light background using the `:target` pseudo-class. Use `:target` for simple client-side navigation or highlighting without JavaScript. Ensure each targetable section has a unique `id`. Combine `:target` with smooth scrolling for a better user experience. Avoid using `:target` for elements without valid `id` attributes — it won’t work.

Difficulty: 3/10

CSS :target pseudo-class, anchor-based navigation, client-side routing without JS

Highlighting the Current Section with :target in CSS

The :target pseudo-class in CSS allows you to style an element that matches the current URL fragment identifier (the part after the # symbol). This is especially useful for highlighting the current section in a menu or single-page navigation.

Key Points About :target

1
:target selects the element whose ID matches the fragment in the URL (e.g., #about).

How can you highlight the current section in a menu using :target?

Difficulty: 3/10

CSS :target pseudo-class, anchor-based navigation, client-side routing without JS

Highlighting the Current Section with :target in CSS

Key Points About :target

1
:target selects the element whose ID matches the fragment in the URL (e.g., #about).

How can you highlight the current section in a menu using :target?

Highlighting the Current Section with :target in CSS

How can you highlight the current section in a menu using :target?

Highlighting the Current Section with :target in CSS

Scenario Questions

Follow-up Questions