Changer la couleur des liens en fonction de l'attribut href

Question

Je travaille sur Squarespace pour un client qui a besoin d'ajouter des articles de blog spéciaux dont le style est différent. Le problème est que ce modèle ne le permet pas et que le client ne sait pas coder. J'essaie donc de le faire avec un CSS personnalisé de manière à éviter les erreurs.

Tous ces articles "spéciaux" ont un lien avec href qui contient le mot "spécial", donc je les stylise avec le sélecteur css :

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

Ma question est la suivante : si le client ajoute des messages spéciaux tels que "Paysage spécial", "Images spéciales", "Thème spécial", etc., je peux les cibler :

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

Existe-t-il un moyen de leur donner un style différent en fonction des href sans avoir besoin de connaître la première lettre du second mot ? Sinon, si le client met un deuxième mot différent, le style ne sera pas appliqué.

J'ai essayé avec nth-of-type() et ainsi de suite mais comme chaque lien est enfant de différentes cartes de blog, cela ne fonctionne pas.

J'espère m'expliquer :)

Answer 1

Je pense que ce n'est pas possible de la manière dont vous l'auriez souhaité.

Si vous voulez avoir des styles différents pour ces liens, par exemple :

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

vous devez savoir quel est le deuxième mot du lien pour lui donner un style spécial. ATM dans votre cas, vous pouvez avoir un style différent pour les liens normaux, les liens avec "spécial" dans la balise href-attribute et les liens avec "special-" plus d'autres mots dans la rubrique href-attribute .

Si vous ne connaissez pas le deuxième mot, tout ce que vous pouvez faire, c'est de préparer des styles pour autant de cas auxquels vous pouvez penser.

Une autre solution pourrait être de donner à votre client une liste de combinaisons de chaînes spéciales que vous préparez pour qu'elles aient un style propre s'il les utilise dans le lien.

<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

et dans votre CSS vous avez :

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

Vous pouvez lui dire d'utiliser ces chaînes spéciales s'il veut que son lien soit d'une couleur particulière. Mais cela 1. n'est pas vraiment confortable pour lui et 2. donne un aspect assez étrange aux URL.

---

Edit : et veillez à ne pas utiliser de vrais mots ou chaînes de caractères qui pourraient être utilisés dans d'autres liens si vous ne voulez pas qu'ils soient colorés par erreur.

Answer 2

Vous pouvez utiliser href attr pour le sélectionner

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

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

Answer 3

Puisque vous avez accepté le réponse ci-dessus Je ne suis pas sûr qu'ajouter de la couleur comme ça à l'intérieur des liens soit une bonne idée.

Vous pouvez vous appuyer sur la variable CSS et faire quelque chose comme ceci :

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>

Vous pouvez aussi appliquer directement le style inline :

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

Ou utilisez l'attribut de données :

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>