CSS Link Specificity by Nicole Hernandez
Love Hate
is how I taught myself to remember the order. The acronym for the order (LVHA)
just wasn't terribly easy to remember on its own. It didn't spell anything, or
really give a sensical meaning to me. But Love Hate works. So what is LVHA?
1. a:link
2. a:visited
3. a:hover
4. a:active
LVHA is the order you should designate your link rules in the CSS so they work
together. The way that it is designed to work in CSS, each selector has a
specificity. So, just like anything else in the cascade, if there are two
selectors that are both applied to one element, the one with the higher
specificity is applied. Put them in the wrong order, and you could end up with
a page that isn't showing your style rules as you intended them.
The only two that you can change the order on are the a:link and a:visited
(primarily because a link is only either or, never both). Now, keep in mind
that you can change a multidute of things with links, but always keep in mind
that specificity. To give an example of a potential problem, look at the
following CSS:
Problem Order
a:link { background-color:white; color: blue }
a:active { background-color: blue; color: white;}
a:hover { background-color: black; color: white;}
a:visited {background-color:white; color:green;}
If you use the above CSS, all of it will work Except
the active rules. Those will not show. Why? As I said earlier, visited and link
do not have to be in a specific order (though ideally they should be in the
LVHA order to keep consistency), but the active has to come after the hover.
Due to the active being placed before the hover, that part breaks. Simply
swapping the places of the active and hover (within the CSS) will fix the order
of the cascade and allow it to all work.
Correct Order
a:link { background-color:white; color: blue }
a:hover { background-color: black; color: white;}
a:active { background-color: blue; color: white;}
a:visited {background-color:white; color:green;}
In CSS2 we were able to combine our pseudo-classes, so that we could customize
it further. An example being that you could have a regular hover for a link,
but make it different for a visited link:
a:visited:hover {background-color: green; color: black;}
Overall, as long as you remember Love Hate, specificity for making
links isn't terribly complicated.
About the Author
Nicole Hernandez is a web developer with a specialty in web standards and
accessibility. She is the owner of Website
Style and publishes technical articles on her blog called
Beyond Caffeine.
|
