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>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

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?

CodePudding user response：

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.

CodePudding user response：

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 {}).

CodePudding user response：

Try This because :link only work for unvisited links

.contact a:link, .contact a:visited {
     color:red
 }
 .contact a:hover{
     color: green;
 }
 .contact a{
     color: blue;
 }

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


   

    

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

first give a color only on a tag and then on a:hover.