[Resolved] Different colors for external links and internal links

[Bernhard]

Hello,
I would like to use different colors for external links and internal links.

My idea is to use the colors set in the customizer for internal links and assign via CSS to all links, that don’t point to my-website.com, another color (probably the standard blue of the Google links).

[David]

Hi there,

you can try this CSS:

a:not([href*="your-domain"]) {
  color: blue;
}

This will apply a color to any link that does not contain the your-domain string. So if your site was: www.example-site.com you would use:

[href*="example-site"]

[Bernhard]

Hi David,
now found a problem with relative links, e.g. in the Table of content, is it possible to address them?
Thank you.

[David]

Depends where those links are – for example you could try this:

p a:not([href*="your-domain"]) {
  color: blue;
}

This will only target a link that is within a paragraph.

[Bernhard]

Perfect, thank you 🙂

[David]

You’re welcome

[Author]

Posts