CODEWITHSUNDEEP
htmlcss
user1341808
user1341808

Reputation: 259

class for link not working with CSS

I've assigned the class "greenbutton" to a link in my html, but none of the changes I make to this class on my CSS take effect.

home.html.erb

<p><a class="greenbutton" href="#">Sign Up</a> to learn more</p>

custom.css.scss

.greenbutton a:link, .greenbutton a:visited {
font-size: 14px;
text-decoration: none;
}

The weird thing about this is that when I assign this class to the preceding paragraph tag, the changes take effect. Any thoughts?

Upvotes: 2

Views: 30043

Answers (3)

irfanmcsd
irfanmcsd

Reputation: 6571

Css class should be like this.

a.greenbutton, a.greenbutton:visited {
font-size: 14px;
text-decoration: none;
}

Upvotes: 2

Sampson
Sampson

Reputation: 268462

Your selector is wrong:

.greenbutton a:link

This targets anchor links within an element that has the class "greenbutton". What you want is for the class to be on the anchor:

a.greenbutton:link

Upvotes: 2

Brad Christie
Brad Christie

Reputation: 101614

The CSS you're trying should either be applied to the <p> or modified to a.greenbutton. What you're specifying is an anchor within an element classed greenbutton. e.g.

.greenbutton a { } /* anchor inside .greenbutton-classed element, like:

  <p class="greenbutton">
    <a href="#">Foo</a>
  </p>

*/

a.greenbutton { } /* anchor with .greenbutton class applied, like:

  <a href="#" class="greenbutton">Bar</a>

*/

Upvotes: 5

Related Questions