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