Multiple Link Colors

HTML & CSS
1

I have two “a” links on the same page. I would like each to have their own color set. How do I set selectors to distinguish between the two? Thanks.

2

There’s always a difference, but without code it’s hard to know.

What about add separate classes to them? :wink:

1 Like
3

Thanks. I assigned an id to one.

4

Hi Engine44,
Add separate classes to it is indeed the best way to do that. Better to have full control on final layout

HTML :


<a href="whatever_link_it_is.html" class="color1">CONTENT</a>  

<a href="whatever_link2_it_is.html" class="color2">CONTENT</a>

CSS :

 /* (for example)  */

.color1 {
color : fff  ;          
background-color : 000  ; 
}

.color2 {
color : rgb(214, 122, 127);           
background-color : hsla(30, 100%, 50%, .3); 
}

easy peasy!
Take care of your 44 Engine(s) :laughing:

5

Thanks. I did end up with separate classes and it works fine.

6

Just be aware that having links in different colours may confuse some users of your site, and ensure that you follow best practice for accessibility.

https://webaim.org/techniques/hypertext/link_text#appearance

4 Likes
7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.