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:visited {background-color:white; color:green;}
a:hover { background-color: black; color: white;}
a:active { background-color: blue; color: white;}
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.
Related Articles
- Search Engine Keywords SelectionSearch engines are the vehicles that drive potential customers to your websites. But in order for visitors to reach their destination - your website - you need to prov...
- Search Engine Keywords Selection - The Easy WaySearch engines are the vehicles that drive potential customers to your websites. But in order for visitors to reach their destination - your website - you need to provide them with specific and effective signs that will direct them right to your site.
- Search Engine Keywords SelectionThe search engines like Google,Yahoo and MSN are the vehicles that drive potential customers to your websites. Since search engines are the first stop for people on the Internet looking for goods or services, the position that your website appears in search results is an important factor.
- Search Engine Made EasyThis a great little article for the new and intermediate student of search. The author explains succinctly how search engines operate, then gives a list of ways to make your webpage as search-friendly as possible.
- An Overview of CSS in Dreamweaver 8If you are new to CSS and how it works in Macromedia Dreamweaver then this is the tutorial for you. You will get a good overview of how it works and what it entails.
- Link Building - In the Eye of Search EngineWhat is link exchange and how to do it? Simply saying link exchange means placing link of website on other websites. To start link exchange contact other website and convince them to place your website link on their website and in return add their website link on your website. This is called link ex...
- Top 10 Ways To Get People To Link To Your Web Site!Getting people to link to your site can be the key you need for success. This great articles will explain to you everything you need to know in order to get headed in the right direction.
- Link Exchange StrategiesLink exchange is a very important part in the sites promotion. This article gives you the general idea of the link exchange and provides you with several strategies.
- Link Exchanges: What They can do for Your BusinessFor those of you who dont know the definition: Link Exchanges are 2 links back and forth between 2 individual companies that have linked to each other. What is the purpose? To build link popularity within Search Engines!
- How To Run A Successful Link Exchange ProgramLink Exchanges are a very time consuming project. The time it takes to find the sites to exchange with, contact them and place a link on your page can seem like an eternity. The hardest part about link exchanges isnt the research, its the waiting...