CSS Selectors 15: Priority of Pseudo-class selectors


#1

I'm confused by the prioritization of pseudo-class selectors. The example here gives three pseudo-class selectors to enter.

a:link {
    text-decoration: none;
    color: #008b45;
}

a:visited {
    color: #ee9a00;
}
a:hover {
    color: #00ff00;
}

The way the code is working, it appears the :hover selector takes priority over the :visited selector. If I order the selectors in a different manner...

a:link {
    text-decoration: none;
    color: #008b45;
}
a:hover {
    color: #00ff00;
}
a:visited {
    color: #ee9a00;
}

:visited takes priority over :hover.

Is the sequence of selectors in the CSS file the most important part of ranking which pseudo selector is prioritized (last in file taking precedence)? Or is there a way to prioritize one selector over another without worrying about the order of selectors in the file?


#2

@cssrockstar62168,
Please read this discussion/opinion
http://stackoverflow.com/questions/1337033/css-avisitedhover


#3

css uses a point system for equal property's, in this case:

a:hover {
    color: #00ff00;
}
a:visited {
    color: #ee9a00;
}

the points are equal, so the last property is applied. Of course you could give hover more points:

body a:hover

you can read more about it here


#4

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