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.
Source of article:
www.goarticles.com
| |
|