css

CSS a href styling

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")

Solution

  • .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.