Change link CSS color without changing :hover color

Question

Here's something I've never encountered before:

/* These first two rules are in a CSS library */
a { 
  color: #1EAEDB;
}

a:hover { 
  color: #0FA0CE;
}

/* This rule is my own */
.example a:link {
  color: #000;
}

<div class="example">
  <a href="http://stackoverflow.com/doesntexist">StackOverflow</a>
</div>

I'm trying to change the color of just :link state without affecting :hover. Is this possible in CSS?

The first two rules are from a library, so I can't change them or their order.

Answer 1

Your :link has the class before it, so it is more specific, and the hover is currently placed before the :link, so the color is overwritten by the :link color.

Here is a neat Specificity Calculator.

With the limitations imposed

Duplicate the :hover and place the class before it, to increase its specificity. Make sure that you use the LVHA order (:link, :visited, :hover, :active)

a {
  color: #1EAEDB;
}
a:hover {
  color: #0FA0CE;
}
.example a:link {
  color: #000;
}
.example a:hover {
  color: #0FA0CE;
}

<div class="example">
  <a href="http://stackoverflow.com/doesntexist">StackOverflow</a>
</div>

The proper way - without the limitations

1. Use .example a:hover.

2. Place the :hover after the :link. Make sure that you use the LVHA order (:link, :visited, :hover, :active) (Emphasis mine):

   The :link CSS pseudo-class lets you select links inside elements. This will select any link, even those already styled using selector with other link-related pseudo-classes like :hover, :active or :visited. In order to style only non-visited links, you need to put the :link rule before the other ones, as defined by the LVHA-order: :link — :visited — :hover — :active.

Working Example

a {
  color: #1EAEDB;
}
.example a:link {
  color: #000;
}
.example a:hover {
  color: #0FA0CE;
}

<div class="example">
  <a href="http://stackoverflow.com/doesntexist">StackOverflow</a>
</div>