Title: Anchor element doesn't change color when hovered
Tags: html;css;css-selectors
Question: I have the following CSS:
.container a {
text-decoration: none;
font-weight: bold;
color: rgb(23, 230, 230);
.container a:hover {
text-decoration: underline;
color: white;
.container a:visited {
color: rgb(230, 0, 230);
And this html (piece of):
<div class="container"&gt;
...
<div class="menu"&gt;
<ul&gt;
<li&gt;
<a href="#"&gt;link1</a&gt;
</li&gt;
<li&gt;
<a href="#"&gt;link2</a&gt;
</li&gt;
<li&gt;
<a href="#"&gt;link3</a&gt;
</li&gt;
</ul&gt;
</div&gt;
</div&gt;
I don't understand why all the link options work, except for the color on hover: It does get underlined, but the color doesn't change. Does anyone know why?


Here is another answer: When dealing with pseudo-classes on anchor elements, the order matters.
They must be in this order:
a:link
a:visited
a:hover
a:active
a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective! a:active MUST come after a:hover in the CSS definition in order to be effective!
source: http://www.w3schools.com/css/css_pseudo_classes.asp
There's a popular mnemonic you can use to remember this: LOVE HATE (lv ha).
For more details, see these references:
Why do anchor pseudo-classes a:link, :visited, :hover, :active need to be in correct order?
Why does .foo a:link, .foo a:visited {} selector override a:hover, a:active {} selector in CSS?
How To Remember The Order of Selectors: LOVE and HATE
Comment for this answer: Not related to the question but it is a good practice to always include `:focus` in the list (before `:hover`). It is used for keyboard navigation.

Here is another answer: If you're finding your css is not taking not taking effect no matter what you do, it's worth adding !important parameters to tell the browser you designate your style attribute as having precedence.
.container a {
text-decoration:none !important;
font-weight: bold !important;
.container a:visited {
color: rgb(230, 0, 230) !important;
}
.container a:hover {
text-decoration:underline !important;
color: white !important;
Having said that, sometimes even with !important, still your style may be overridden. To unravel the CSS settings in the browser it's essential to use the inspector console. I think you may already be using the inspector, but if you want more info on this, please let me know.

Here is another answer: jsfiddle link for everyone
.container a {
text-decoration: none;
font-weight: bold;
/* color: rgb(0, 230, 230); */
.container a:hover {
text-decoration: underline;
color: green;
/* .container a:visited {
color: rgb(2, 0, 230);/
.test {
/* color: black; */
I loaded up your html and CSS into my sublime and it totally works fine.  I toyed around with the colors a bit and everything is great.  I loaded it up in fiddle to show you.  When you have a list like you do, you want to target the list with some sort of class or ID to target them specifically.  I commented some things out inside of the fiddle for you to see. enter code here

{'source': 'StackExchangeDataset', 'subset': 'stackoverflow.com', 'metadata': {'AnswerCount': 3, 'CommentCount': 0, 'ContentLicense': 'CC BY-SA 3.0', 'CreationDate': '2016:00:04/26/16', 'FavoriteCount': None, 'PostTypeId': 1, 'Tags': '<html><css><css-selectors>', 'Title': "Anchor element doesn't change color when hovered", 'ViewCount': 418, 'id': 36854403, 'user_AboutMe': '<p>Software engineering and mathematics student at ITBA (Technological Institute of Buenos Aires) and UBA (University of Buenos Aires).</p>\n', 'user_AccountId': 5355547.0, 'user_DisplayName': 'YoTengoUnLCD', 'user_Reputation': 608.0, 'user_Views': 300.0, 'user_id': 4996524.0}}