How to change the link color in a specific class for a div CSS

Question

In my Page the following CSS is set:

a:link {
    color: #0094DE;
    text-decoration: none;


}
a:visited {
        text-decoration: none;
color: #0094DE;

}
a:hover {
text-decoration: underline;
color: #DD127B;

}

I want to Change the Link color inside a div which has a class assigned to it. I tried the following :

register:link{color:#FFFFFF;
        }

Where register is the name of the div in which i want to change the link color. How can i do that? Also how to change the color for hover link over the same div?

score 63 · Answer 1 · edited Dec 10 '13 at 17:20

63

.register a:link{
    color:#FFFFFF;
}

edited Dec 10 '13 at 17:20

daniel__

11,633
15
64
91

answered Jun 01 '12 at 06:40

Shehzad Bilal

2,535
2
18
27

note that this should be #register, not .register ... the OP said div not class – carrabino Oct 01 '13 at 09:28
3

@Anthony The OP said div with a class assigned to it. Does what you say still apply? – Nels Beckman Aug 24 '14 at 15:25
OP: "Where register is the name of the div in which i want to change the link color" ... which to me says register is the id value, not the name of a class that's been assigned to the div. – carrabino Aug 25 '14 at 19:45
This answer doesn't work for multiple users. See https://stackoverflow.com/a/30296997/8314623 for a different solution. – Magiranu Nov 11 '17 at 13:46

score 51 · Answer 2 · answered May 18 '15 at 07:05

51

It can be something like this:

a.register:link { color:#FFF; text-decoration:none; font-weight:normal; }
a.register:visited { color: #FFF; text-decoration:none; font-weight:normal; }
a.register:hover { color: #FFF; text-decoration:underline; font-weight:normal; }
a.register:active { color: #FFF; text-decoration:none; font-weight:normal; }

answered May 18 '15 at 07:05

Aditya P Bhatt

21,431
18
85
104

1

The top voted answer did not work for me, but using this syntax did work. Voting for this one. – ZeekLTK Oct 11 '16 at 15:43
1

Same for me too. +1 – Magiranu Nov 11 '17 at 13:46
2

This was the only syntax that worked for me as well. Thanks so much! – JenVander Apr 27 '18 at 18:04
1

@JenVander thanks for your motivation :) it helps a lot! – Aditya P Bhatt Apr 29 '18 at 06:04
1

I can confirm I had the same problem with the top voted, this one worked immediately – ZioBit Feb 02 '22 at 06:58
You can replace those 4 lines with just one: `a.register { color: white; text-decoration: none; font-weight: normal; }`, (or `.register a { ... }` to more closely match the question which specifies "inside a div which has a class assigned to it". – Kai Carver Jul 18 '23 at 09:52

score 6 · Answer 3 · answered Jun 06 '15 at 16:58

6

how about something like this ...

a.register:link{
    color:#FFFFFF;
}

answered Jun 06 '15 at 16:58

Eddie Madrigal

61
1
1

This is actually the problem I was trying to solve: this places styling on something like this: click me Thanks! – Ryan S Jan 25 '16 at 01:51

fuxoft · Answer 4 · 2021-04-28T09:22:10.050

6

I think there is a confusion about what the OP is actually asking.

This solution:

a.register:link {color:#FFF}

...changes the color of a link whose class is "register". But that's not what the OP was asking.

And this solution:

.register a:link {color:#FFFFFF;}

...changes the color of a link that itself has no class but is placed inside of a div with class "register". And that's what the OP was asking.

Both of these answers are being upvoted here but only the second one is correct answer to the original question.

edited Apr 28 '21 at 09:22

answered Apr 27 '21 at 12:04

fuxoft

154
1
6

Thank you for your answer! Make sure you take a look at the other answers in the thread as well before submitting. It looks like this answer is the same as the current top voted but was determined to not be the final working solution. – Adam Apr 27 '21 at 12:23
Currently the most upvoted answer is correct and the second most upvoted answer is wrong but it's getting upvoted and praised anyway because it's correct for people who are trying to solve different problem than the OP posed. That's why I posted this to hopefully clear the confusion. – fuxoft Apr 27 '21 at 12:44

score 3 · Answer 5 · answered Jun 01 '12 at 10:31

3

#register a:link
{
color:#fffff;
}

answered Jun 01 '12 at 10:31

Prashobh

9,216
15
61
91

score 3 · Answer 6 · edited Mar 01 '18 at 12:14

3

If you want to add CSS on a:hover to not all the tag, but the some of the tag, best way to do that is by using class. Give the class to all the tags which you want to give style - see the example below.

<style>
a.change_hover_color:hover { 
    color: white !important;
}
</style>

<a class="change_hover_color">FACEBOOK</a>
<a class="change_hover_color">GOOGLE</a>

edited Mar 01 '18 at 12:14

Stephen Kennedy

20,585
22
95
108

answered Mar 01 '18 at 11:54

sayyed tabrez

116
1
1
11

score 0 · Answer 7 · edited Nov 09 '15 at 20:19

0

I think you want to put a, in front of a:link (a, a:link) in your CSS file. The only way I could get rid of that awful default blue link color. I'm not sure if this was necessary for earlier version of the browsers we have, because it's supposed to work without a

edited Nov 09 '15 at 20:19

César

9,939
6
53
74

answered Nov 08 '15 at 21:09

Eagle's Eye

11

score -2 · Answer 8 · edited Sep 03 '14 at 08:01

-2

smaller-size version:

#register a:link {color: #fff}

edited Sep 03 '14 at 08:01

Pete

57,112
28
117
166

answered Sep 03 '14 at 07:44

user4003101

9

How to change the link color in a specific class for a div CSS

8 Answers8

Linked

Related