Why doesn't this css remove text-decoration?

Question

I have a post that has a title. I select like so =>

<h4><strong><%= link_to post.title, post, :class => "post-title" 
%></strong></h4>

I want to take away the text-decoration it gets by default form being a link. So i have this in my posts css =>

.post-title  {
text-decoration: none;
 }

I have tried selecting the text in all kinds of different ways and I just can't get that text-decoration to go away..

the html output is just the title of the post with standard text-decoration (blue color with an underline)

I checked safari web inspector and none of my rules were overridden.

Answer 1

Try...

a.post-title {text-decoration: none;}

There's not enough CSS specificity in your selector.

There will be a browser or reset stylesheet applying the text decoration to anchor elements and your stylesheet applying it to anything with a class of 'post-title'. At the moment the anchor style is winning.

Example

a {text-decoration: underline} //Browser CSS
.post-title {text-decoration: none} //Your CSS

Both of those apply to...

a.post-title

Answer 2

It worked when I gave the erb an id of post-title and did the following in my css to select it:

a#post-title {
    text-decoration: none;
 }