Question

I have a very strange problem. I have got a Rails page in which I want to use CSS to format all links, and there are menu links which should have another color. So I started out with

    .menulink:link, .menulink:visited, .menulink:hover, .menulink:active{
        color: red;
    }

in the menubar fragment CSS (sidebar.css.scss)

For all other links, I wrote CSS into application.css.scss:

    a:link, a:visited, a:hover, a:active{
        color: green;
    }

Interestingly, this does not work. BUT if I add a class tag to any link in my code, like so

    <%= link_to "Alle Artikel", :controller => :articles, :action => :index, :class => "foo" %>

it works perfectly. I really am confused. Why this behaviour?

Answer 1

I suspect you may be seeing the ‘cascading’ in Cascading Style Sheets.
Basically it seems that when you place a specific class selector the class gets applied. That’s the rule with css, the more specific the rule the more it will apply any higher level ‘global’ settings.
So when you apply the rule at a higher general level such as all anchors, what may be happening is that there are style rules at lower levels than “all anchors” but at a higher level than the class/tag and this may help explain the behavior you are seeing.