 |
Add
Remote Backup Services to your existing business, or start
a profitable Internet-based online backup service for
a high profit recurring revenue stream.
Click
here for more info. |
|
|
03.29.06
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:
Add
Remote Backup Services to your existing business, or start
a profitable Internet-based online backup service for
a high profit recurring revenue stream.
Click
here for more info. |
|
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.
|
