CODEWITHSUNDEEP
css
Charles Murray
Charles Murray

Reputation: 383

css class id conflict

I'm new to css. Here's my html

<a href="#" class="clickme" id="noteaddbutton"> Add Note</a>

The class "clickme" is part of a jquery function and the id is supposed to change the size from the standard of other links but it isn't making the text smaller.

#noteaddbutton{
    font-size:13px;
}

a:link{
font-size:18px;
text-decoration:none;
}

a:hover{
    text-decoration:underline;
}

Upvotes: 0

Views: 1122

Answers (5)

FelipeAls
FelipeAls

Reputation: 22161

It works for me, by example in this fiddle: http://jsfiddle.net/GFnK7/2/

First link is 13px and on yellow background for me (Fx9, WinXP).
The 2nd link has a dummy destination that you shouldn't have visited for now. I see it on lightgreen bg, 18px and then after a click on violet bg, if and only if layout.css.visited_links_enabled is set to true in about:config.
The 3rd link is identical to the 2nd one.

The pseudo-class :link applies to un-visited links. With a value of # for href, you'll soon have visited this URL ;) (after one click on any href="#" link)

Note: a selector with an id should be more specific than another selector with only a pseudo-class and an element (:link with a). This is (1,0,0) against (0,1,1) in terms of selector specificity.

Upvotes: 0

Charlie
Charlie

Reputation: 11767

CSS is read starting at the top and going down (cascading style sheet). The element you are attempting to style has the following qualities about it,

  1. <a> tag
  2. #noteaddbutton
  3. .clickme

In your css, you are styling all <a> tags and #noteaddbutton, but the <a> style is after the style just for the ID. Since the ID style is before the <a> style, the <a> style takes precedence.

You can fix this by doing two things...

1.) Putting the ID styles below the <a> styles:

a:link{
font-size:18px;
text-decoration:none;
}

#noteaddbutton{
font-size:13px;
}

2.) Putting !important after the font-size attribute on the ID style

#noteaddbutton{
font-size:13px !important;
}

You can put #2 anywhere you like.

Upvotes: 1

Mo3z
Mo3z

Reputation: 2128

It is working for me. I am using FF8. You can try this.

#noteaddbutton{
    font-size:13px !important;
}

Upvotes: 3

Wes Crow
Wes Crow

Reputation: 2967

Try making the class !important allowing it to take precedence:

a:link{
  font-size:18px !important;
  text-decoration:none;
}

Upvotes: 0

Travis J
Travis J

Reputation: 82267

I think a:link is taking precedence over #noteaddbutton. Try using 

a.clickme:link{ font-size: 13px;}

Upvotes: 1

Related Questions