Change link color based on href attribute

问题

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 can't code, so I'm trying to do it with custom CSS in a way that prevents errors.

All this "special" post have a link with href that contains the word "special", so I'm styling them with the css selector:

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

My question is if the client add more special post like "Special landscape", "Special Images", "Special theme" and so on, i can target them with:

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

Is there a way to style them differently based on the href without needing to know the first letter of the second word? Otherwise if the client put a different second word the style will not be applied.

I tried with nth-of-type() and so on but since each link are child of different blog's cards it doesn't work.

I hope explain myself :)

回答1:

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.

回答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>

回答3:

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>

来源：https://stackoverflow.com/questions/49068018/change-link-color-based-on-href-attribute

标签

css

attributes

css-selectors

selector

permalinks