Prevent headings from being highlighted if it's links are visited

Using Themes
1

I’m using the Book theme.

Topics in the /posts/ section like “Creating a New Theme”, “Migrating from Jekyll” are in h2 tag and get highlighted if those links are visited. Going to any of these links like /posts/creating-a-new-theme/ also highlights the heading in h1 tag.

How can I prevent links with h1 and h2 tags from being highlighted even if they are visited?

2

See theme documentation:
https://github.com/alex-shpak/hugo-book#extra-customisation

In the root of your project…

mkdir assets
touch assets/_custom.scss

assets/_custom.scss

a {
  text-decoration: none !important;
  color: var(--color-link) !important;
}
3

This highlights all links, for instance everything in the left menu pane under “Example Site” and “Shortcode” in ul tags. I’m not looking to change this setting.

Even the tags in a post, for instance Getting Started with Hugo, are ok.

I just want to be able to avoid headings on this page from being highlighted if they’re visited.

I have:

h1:visited, h2:visited {
  color: inherit;
  text-decoration: none;
}

in PROJECT_ROOT/assets/_custom.scss, but that does prevent visited links in headings (this page) from being highlighted.

4

Then target the element/class/id whatever in the custom styling.

5

Heading elements don’t have these pseudo-classes. If you need help with CSS, please use something like Stack Overflow.

Generally, CSS is off-topic in this forum.

6

Added the following in .book-post class in _menu.scss:

  h1, h2 {
    a:visited {
      color: inherit
    }
  }
7

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.