CODEWITHSUNDEEP
htmlcss
confusedstudent
confusedstudent

Reputation: 15

How to change color on mulitple <a> tag?

My problem is that the .row a color is also affecting my contact link to be white, and even tho I try changing it to ex. red it does not work, but the hoover works so it becomes green.

.row a {
  color: white;
  text-decoration: none;
}

a.contact:link {
  color: red;
}

a.contact:hover {
  color: green;
}
<div class="row">
  <div class="col-3 col-s-3 menu">
    <ul>
      <li><a href="contact.html">Contact</a></li>
    </ul>
  </div>

  <div class="contact">

    <h2>Phone:</h2>
    <p><a href="tel:+00000000" target="_blank">00000000</a></p>

  </div>
</div>

I have also tried adding a class inside like this with no luck,

<p><a class="contact" href="tel:+0000000" target="_blank">0000000</a></p>

How do I change my phone link to have a different color?

Upvotes: 0

Views: 64

Answers (2)

Quentin
Quentin

Reputation: 943996

but the hoover works so it becomes green.

Given the code you have, that won't be the case. It would be if you either set the class on the link (as in your second example) or used the class in a descent combinator (as you did in for the row class).

If you change that then you would get the behaviour you describe.

:hover works but :link does not because you have visited the link.

:link only applies to unvisited links (its companion is :visited).

Since the link is visited, you have no styles that match it other than .row a.

You can remove the requirement for the link to be unvisited (i.e. a.contact or .contact a depending on if you move the class attribute or not) or add a style for visited links (e.g. .contact a:link, .contact a:visited {}).

Upvotes: 1

Maik Lowrey
Maik Lowrey

Reputation: 17586

All what you need to change is this two classes:

.contact a {
  color: red;
}

.contact a:hover {
  color: green;
}

Because you select the element by class name and then all anchors inside of them.

Upvotes: 1

Related Questions