Overriding stylesheets

Question

I have a link, where I want to change the color of the text away from the color that I set for hyperlinks. My code is:

<span class="button"><%= link_to "Create new scenario", :action => "create" %></span>

And my CSS is:

a:link { 
  color:rgb(50%, 15%, 5%);
  text-decoration:none; 
} 


.button {
  -moz-border-radius-bottomleft:6px;
  -moz-border-radius-bottomright:6px;
  -moz-border-radius-topleft:6px;
  -moz-border-radius-topright:6px;
  background-color:rgb(93%, 93%, 93%);
  border:1px solid black;
  color:black !important;
  line-height:1.9;
  margin:0 3px 3px 0;
  padding:4px 8px 4px 3px;
  text-decoration:none;
}

For some reason the hyperlink text is still brown, rgb(50%, 15%, 5%).

Answer 1

You could make a css style .button a:link {color: black;}

Answer 2

Change your css to use the .button class and anchors with a parent css class of .button. as shown below:

.button,.button a:link {
  -moz-border-radius-bottomleft:6px;
  -moz-border-radius-bottomright:6px;
  -moz-border-radius-topleft:6px;
  -moz-border-radius-topright:6px;
  background-color:rgb(93%, 93%, 93%);
  border:1px solid black;
  color:black !important;
  line-height:1.9;
  margin:0 3px 3px 0;
  padding:4px 8px 4px 3px;
  text-decoration:none;
}

EDIT: Keep in mind that this causes the border to repeat and makes the hyperlink show up without an underline because of text-decoration:none. The best practice in this case is to have a separate css declarations.

.button {....}
.button a:link {.....}

Answer 3

I think it's because of the specificity; the span (.button) is less specific to the link than the a:link so the a:link styles are being applied (correctly according to the spec: http://www.w3.org/TR/CSS2/cascade.html).

If you want to override the a:link styles for this one button (or...well, any other in the same way) add the class to the <a> tag rather than its parent element.

Though you might get away with:

.button > a:link {/* styles */}

Which should become specific since this one <a> is the descendant of the the span of class .button.

Edit:

It's worth pointing out that the '>' selector applies only to immediate descendants, so an a inside an element of class .button would be affected, however an a inside a div in turn inside an element of class .button would not be affected.

Also this selector is not supported by IE (certainly below version 7, and I don't know about version 7 -or, indeed, version 8). It might be okay to use, instead, the '*' operator:

.button * a:link {/* styles */}

bearing in mind that while this is supported -I think- in IE after version 5.x at least, it's a little broad in that it will target all as within an element of class .button, regardless of any interim elements, and will still likely be less-specific than any rule applied to a:links.

Answer 4

"! important" is not for forcing child's style. It's for the user to override styles assigned by webpage author. It has no use in your case.

The proper way to do it is:

.button {
  -moz-border-radius-bottomleft:6px;
  -moz-border-radius-bottomright:6px;
  -moz-border-radius-topleft:6px;
  -moz-border-radius-topright:6px;
  background-color:rgb(93%, 93%, 93%);
  border:1px solid black;
  color:black;
  line-height:1.9;
  margin:0 3px 3px 0;
  padding:4px 8px 4px 3px;
  text-decoration:none;
}

.button a {
  color:black;
}

Remarks:

1. ".button > a" is a good idea but it won't work in IE6. Therefore one should use ".button a" here to be safe.
2. Putting ".button" and ".button a" together in one set of style will make the button border repeat itself.