Why hover will work on all <a> if it is at last in .css among link visited hover?


#1


a:link{
    color:#008B45;
}


a:visited{
    color:#EE9A00;
}
a:hover{
    color:#00FF00;
}


#3

because of the point system uses if it has conflicting property's, both have equal points so the last one gets applied


#4

Known as specificity. There are four levels, in all.

The highest level is the inline style attribute which holds sway over every other level and with specifity of 1, 0, 0, 0. Incluided in this level is !important, which wins out against even an inline style rule.

Next highest is the ID attribute, id="fragment", as in, #fragment which has specificity, 0, 1, 0, 0.

The second level up is the CLASS attribute, class="foo", as in, .foo, with specificity 0, 0, 1, 0. Included in this level are pseudo-classes.

The lowest level is the element type and pseudo-elements, with specificity 0, 0, 0, 1.

a:link, a:visited, a:hover, a:focus, a:active

All of the above have equal specificity.

0, 0, 1, 1
      ^  ^
      |   \
      |    a
   :link
   :visited
   :hover 
   :focus
   :active

As @stetim94 mentioned above, the order in which the selector rules are written will determine precedence. This is known as cascade. When selectors have the same specificity, the one lowest in the cascade takes precedence over the others.

In the case of link elements, the above list is the exact order in which to write the rules so they take effect when expected. A visited link should take precedence to an unvisited link so the color is applied. Hover (and focus) should apply in both cases, and active will take the most precedence.


#5

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.