Change link color based on href attribute

Question

I\'m working on Squarespace for a client that needs to add special blog post that are styled different. The problems is that this template doesn\'t allow it and the client c

Answer 1

Since you accepted the above answer, here is another way I think it could be better as am not sure appending color like that inside links is a good idea.

You can rely on CSS variable and do something like this:

a[href*=special] {
  color: var(--c);
}

<a href="special-1" style="--c:red">link 1</a>
<a href="special-something" style="--c:blue">link 2</a>  
<a href="special-something-else" style="--c:green">link 2</a>

Or you can directly apply inline-style:

<a href="special-1" style="color:red">link 1</a>
<a href="special-something" style="color:blue">link 2</a>  
<a href="special-something-else" style="color:green">link 2</a>

Or use data-attribute:

a[data-color="red"] {
 color:red;
}
a[data-color="blue"] {
 color:blue;
}
a[data-color="green"] {
 color:green;
}

<a href="special-1" data-color="red">link 1</a>
<a href="special-something" data-color="blue">link 2</a>  
<a href="special-something-else" data-color="green">link 2</a>

Answer 2

you can use href attr to select it

a[href*="http://abc.go.com"] {
  color: #db4344;
}

<a href="http://abc.go.com/">link 1</a>

Answer 3

I think it is not possible the way you would have like it.

If you want to have different stylings for these links, for example:

<a href="special-boat"></a>   // in blue
<a href="special-car"></a>    // in red
<a href="special-house"></a>  // in green

you need to know what is the second word of the link to give it a special styling. ATM in your case you can have different styling for normal links, links with "special" in the href-attribute and links with "special-" plus more words in the href-attribute.

If you do not know the second word, all you can do is to prepare stylings for as many cases you can think of.

Another way COULD be, that you give your customer a list of special string combinations which you prepare to have an own styling if he uses them in the link.

<a href="you-dont-know-the-link-c0000FF"></a>   // in blue
<a href="you-dont-know-the-link-c00FF00"></a>   // in green
<a href="you-dont-know-the-link-cFF0000"></a>   // in red

and in your CSS you have:

a[href*=c0000FF] {
  color: blue;
}
a[href*=c00FF00] {
  color: green;
}    a[href*=cFF0000] {
  color: red;
}

You can tell him to use these special strings if he wants to have his link in a special color. But this is 1. not really comfortable for him and 2. quite a strange look in the URLs.

---

Edit: and be sure not to use real words or strings that could be used in other links if you don't want them to be colored by mistake.