-1

I'm trying to change the color of a link to green with class, in css, but it's not working for some reason. What am I doing wrong?

a:link {
color: red;
}
.colorGreen a:link {
color: green;
}
<a href = 'www.link.com'> www.link.com </a> <br>
<a href = 'www.link.com'> www.link.com </a> <br>
<a class = 'colorGreen' href = 'www.link.com'> www.link.com </a>
jessica
  • 1,667
  • 1
  • 17
  • 35

3 Answers3

1

You are selecting the children a tags which have parent class colorGreen. It should be:

a.colorGreen:link {
   color: green;
}

Now, you're selecting the a tag which have colorGreen class.

Bhojendra Rauniyar
  • 83,432
  • 35
  • 168
  • 231
  • I got the wrong answer from here, that got up voted 21 times. http://stackoverflow.com/questions/10845517/how-to-change-the-link-color-in-a-specific-class-for-a-div-css – jessica Feb 23 '16 at 03:32
  • 3
    @jessica your question isn't the same as that one – j08691 Feb 23 '16 at 03:33
  • 1
    @jessica There's nothing wrong. There the OP is selecting a tag which have parent class `register`. – Bhojendra Rauniyar Feb 23 '16 at 03:33
  • This answer says exactly what the other answer says but solves a different problem, and both are correct. It deserves the check. https://jsfiddle.net/s1owjz21/ +1 – Mark Miller Feb 23 '16 at 03:37
  • Yeah. I don't get the difference between the 2 questions. Isn't the other question also about setting classes on links? – jessica Feb 23 '16 at 03:39
  • @jessica I am clearly stating you that there the OP is trying to select the a tag which have parent class `register` but here you are trying to select the a tag which have `colorGreen` class. Didn't you get it? – Bhojendra Rauniyar Feb 23 '16 at 03:41
  • So, the other person is trying to set the color of the link through the parent div, and I'm trying to set the color of the link through the link itself? – jessica Feb 23 '16 at 03:43
  • @jessica Yes, glad you got it. – Bhojendra Rauniyar Feb 23 '16 at 03:44
1

css is use when

  .classname a:link{
    }

element is 

<div class="classname">
<a ></a>
</div>


a:link {
color: red;
}
.colorGreen:link {
color: green;
}

.colorBlue a:link {
color: Blue;
}
<a href = 'www.link.com'> www.link.com </a> <br>
<a href = 'www.link.com'> www.link.com </a> <br>
<a class = 'colorGreen' href = 'www.link.com'> www.link.com </a>


<div class="colorBlue">  
  <a href = 'www.blue.com'> www.link.com </a>
 </div>
Kishan
  • 1,182
  • 12
  • 26
0

You can use many ways to apply this. Using !important

a:link {
color: red;
}
.colorGreen {
color: green !important;
}
<a href = 'www.link.com'> www.link.com </a> <br>
<a href = 'www.link.com'> www.link.com </a> <br>
<a class = 'colorGreen' href = 'www.link.com'> www.link.com </a>
or this way. 

 a:link {
    color: red;
}
.colorGreen:link {
    color: green;
}
   


    <a href = 'www.link.com'> www.link.com </a> <br>
    <a href = 'www.link.com'> www.link.com </a> <br>
    <a class = 'colorGreen' href = 'www.link.com'> www.link.com </a>
mmativ
  • 1,414
  • 14
  • 25