CODEWITHSUNDEEP
htmlcss
alamodey
alamodey

Reputation: 14953

Overriding stylesheets

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%).

Upvotes: 1

Views: 518

Answers (4)

Ballsacian1
Ballsacian1

Reputation: 17322

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

Upvotes: 3

David Thomas
David Thomas

Reputation: 253476

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.

Upvotes: 3

Jose Basilio
Jose Basilio

Reputation: 51538

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 {.....}

Upvotes: 3

billyswong
billyswong

Reputation: 1202

"! 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.

Upvotes: 0

Related Questions