CSS a href styling

Question

i have a href with class="button"

I am trying to style this like that:

.button a:link {text-decoration: none} 
.button a:visited {text-decoration: none} 
.button a:active {text-decoration: none} 
.button a:hover {text-decoration: none; background-color:yellow;color:blue}

why it is not working? how to set stye for a href with that class (class="button")

Answer 1

.button a is a descendant selector. It matches all <a> tags that are descendants of .button.

You need to write a.button:link to match tags that are both <a> and .button.

Answer 2

.button a{} is a rule for

<something class="button">
   <a href="">foobar</a>
</something>

a.button{} is a rule for

<a href="" class="button">foobar</a>