Search code examples
csscss-cascade

cascade rules of styling in css

I have an <a> tag

<a href="https://www.google.com">GOOGLE</a>

with following styles:

a {
  color: red
}

a:hover {
  color: green
}

a:active {
  color: blueviolet
}

a:visited {
  color: brown;
}

Here is my problem :

a:hover And a:active Are ignored

I Know This Is for Cascade Rules But I want to know best practice to solve it.

I tried adding !important and it worked as I wanted.

I changed line numbers (because importancy and specification are equal so line number is important) and it worked correctly But I want to know which solution is best !!

adding important is not a good idea in most cases and line number is changing in development.

Can I have some kind of selector like this?:

a:not(:hover):visited {
  color: blue
}
Solution

  • I assumed a:hover and a:active are ignored if the link has been visited. If that is the case, try this:

    a {
    color: red
}

a:hover,
a:visited:hover {
    color: green
}

a:active,
a:visited:active {
    color: blueviolet
}

a:visited {
    color: brown;
}
    <a href="https://www.google.com">GOOGLE</a>

    can I have some kind of selector like this ? a:not(:hover):visited { color: blue }

    Yes, you can.