link not turning to yellow when it is active

user_14429483 0
Viewed 65

i wrote a simple html code with <a> tag. the link should turn to yellow when it is active. you can see my css code below for this. I know that a:link:hover should come first then a:link:active, but i want to know why i don't get the yellow color when i write a:link:active first and then a:link:hover

a:link:active{
    color:rgb(238, 255, 0);
}
a:link:hover{
    color:green;
}
<!DOCTYPE html>
<head>
    <title>CSS</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
<a style="font-size: 40px;" href="https://www.stackoverflow.com">Link</a>
</body>
</html>

css html
3 Answers

A link is active while it is being clicked on.

A link is hovered while the mouse is pointing to it.

You can't click on it without pointing the mouse at it.

Thus any time it is active is is also being hovered (i.e. active cannot apply unless hover also applies).

The cascade says that if two rules, setting the same property have the same origin (both your rules are Author rules) and specificity (both have one type selector and two pseudo-class selectors) then the last one overwrites the earlier ones.

Dorward_190680

a:link:hover overwrites a:link:active because it comes after it.

You can overcome this behavior by adding !important after each tag. However, this is not recommended and should be used only when there is no other choice and you cannot use specificity.

a:link:active {
  color: rgb(238, 255, 0) !important;
}

a:link:hover {
  color: green;
}
<a style="font-size: 40px;" href="https://www.stackoverflow.com">Link</a>

user_133311550

You must write in CSS :hover before than :active to avoid overwrite styles.

user_34071480
Related