What's the proper way to override a:visited with Rails 3 and Foundation 4?

Question

I'm working on a new Rails project using Foundation 4. I turned a link into a button using Foundation's classes:

<%= link_to 'New Item', new_item_path, :class => "small button round" %>

The button appeared, looking like I intended:

However, once I'd visited the link, it looked like this:

Not so great.

I looked through the CSS and found that the visited link's color is being set in scaffolds.css.scss:

a {
  color: #000;
  &:visited {
    color: #666;
  }
  &:hover {
    color: #fff;
    background-color: #000;
  }
}

How do I properly cancel this color change on my link? I know I can just delete the &:visited section, but that seems too brute force. I figure there's got to be a more elegant way but my CSS/SCSS/Foundation knowledge is too thin.

Answer 1

Delete your scaffold.css.scss if it' is just generated by rails g scaffold command. It is probably redundant when using zurb-foundation and can break few more other things.

Answer 2

There's no way to remove the visited pseudo-selector, because it's added by the user's browser after you serve the page. If you want to override the color change for all links, delete the &:visited. If you only want to override it for buttons, add:

a.button {
  &:visited {
    color: #fff !important;
  }
}

This will change the visited link color only for the button class.