Change link color based on href attribute

Question

I am working on Squarespace for a client who needs to add a special blog post that is different in style. The problem is that this template does not allow this, and the client cannot encode, so I am trying to do this using special CSS in such a way as to prevent errors.

This “special” post has a link with href that contains the word “special”, so I will style them with the css selector:

[href*="Special"] { style }.

My question is that the client will add more special messages, such as "Special landscape", "Special images", "Special theme", etc., I can configure them as follows:

[href*="Special+l"] { style }. 
[href*="Special+I"] { style1 }.
[href*="Special+t"] { style2 }.

Is there a way to style them differently based on href without having to know the first letter of the second word? Otherwise, if the customer has placed another second word, the style will not be applied.

I tried with nth-of-type () and so on, but since each link is a child of different blogs, it does not work.

I hope I will explain it myself :)

Answer 1

I think this is not possible, as you would like.

If you want to have different styles 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 the second word of the link is to give it a special style. ATM in your case, you can have a different style for regular links, a link to "special" in href-attributeand links to "special-" plus more words in href-attribute.

, , , , .

, , , , .

<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

CSS :

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

, . 1. 2. URL-.

---

: , , , .

Answer 2

href attr,

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

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

Hide result

Answer 3

Since you accepted the answer above , here is another way that I think it might be better, since I'm not sure adding color like that inside the link is a good idea.

You can rely on the 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>

Run codeHide result

Or you can directly apply the 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>

Run codeHide result

Or use the 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>

Run codeHide result