cascade rules of styling in css-CodePudding

I have an 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
}

CodePudding user response：

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.

CodePudding user response：

I suggest that you read this Tutorial. According to that one:

In general, the order of the pseudo classes should be the following — :link, :visited, :hover, :active, :focus in order for these to work properly.

so If you change your CSS file to this one it must be worked correctly:

a:link {
    color: red
}

a:visited {
    color: green
}

a:hover {
    color: blueviolet
}

a:focus {
    color: rgb(230, 49, 175);
}

If you think that hover and active or ... does not work properly, maybe it is because you have visited the link before. try to change the "href" address to see that they are working.

CodePudding user response：

When setting the style for several link states, there are some order rules:

a:hover MUST come after a:link and a:visited
a:active MUST come after a:hover

a:link {
  color: red
}

a:visited {
  color: brown;
}

a:hover {
  color: green
}

a:active {
  color: blueviolet
}

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

See this to know more about link and their states like hover visited order

CodePudding user response：

First, you forgot the semicolon
Second, if !important works, just use it.
Third, I have never met this selector before.
See further about this on W3School