Why don't link pseudo-classes work on class selector?

Question

Here is a JSFiddle illustrating the problem.

With this CSS:

.btn {position:relative; width:auto; background:#2c96c9; color:#fff; cursor:pointer}
.btn a:link {color:#fff; text-decoration:none}
.btn a:visited {color:#fff; text-decoration:none}
.btn a:hover {color:#000; text-decoration:none}
.btn a:active {color:#000; text-decoration:none}

None of the a: rules are applied to this HTML:

<a class="btn" href="http://google.com">Why doesn't this work?</a>

Why? Or what is the proper way to get them to apply to HTML links?

Answer 1

Your selectors don't work because you currently select an a tag inside an element of class .btn, because the space in selectors means selecting a descendant. As it is written now, it would suggest a markup like this:

<div class="btn" >
    <a href="http://google.com">Why doesn't this work?</a>
</div>

But for <a class="btn" href="...">...</a> You should use:

.btn {position:relative; width:auto; background:#2c96c9; color:#fff; cursor:pointer}
a.btn:link {color:#fff; text-decoration:none}
a.btn:visited {color:#fff; text-decoration:none}
a.btn:hover {color:#000; text-decoration:none}
a.btn:active {color:#000; text-decoration:none}