CODEWITHSUNDEEP
css
nathancahill
nathancahill

Reputation: 10850

Change link CSS color without changing :hover color

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.

Upvotes: 6

Views: 1916

Answers (4)

Luiz Gustavo Martins
Luiz Gustavo Martins

Reputation: 41

.example a:not(:hover) {
    color: #000;
}

it does the trick!

Upvotes: 1

misterManSam
misterManSam

Reputation: 24692

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>

Upvotes: 6

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85545

You must provide the :hover css

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

Because .example a:link is more specific than a:hover

Let's see how specificity works:

Selector (per selector)          |Specificity    |     Specificity
----------------------------------------------------------------
inline-style                     | 1 0 0 0       |      1000
id selector                      | 0 1 0 0       |       100
class,pseudo,attribute selector  | 0 0 1 0       |        10
type selector and pseudo elements| 0 0 0 1       |         1   
------------------------------------------------------------------

So .example a:link is equal to 10+1+10 = 21 and a:hover is equal to 1+10=11.

So, after providing :hover the specificity value would be equal but last rule one would be taken by css.

Upvotes: 1

Scott Simon
Scott Simon

Reputation: 65

I think the issue is both the order and specificity of your hover style. This works:

{
  color: #1EAEDB;
}

.example a:link {
  color: #ff00ff;
}

.example a:hover {
  color: #38ce33;
}

Upvotes: 0

Related Questions