Trying to get Sprite to work - css

Question

Just trying to get a very simple sprite to work: Example

What I am trying to do is toggle between the "set" and "unset" bold/italic icons which are in the first and second row of my sprite (respectively).

<a id="bold" class="disabled"></a>      
<a id="italic"></a>

Code seems to be ignoring the "disabled" class as I would expect the bold to be unset (ie have a white background with black text).

Can anybody see what I have done wrong?

Many thanks for any help!

Answer 1

You have mentioned #bold .disabled which means an element with class disabled inside an element with id bold.

It should be #bold.disabled as its the id and the class for the same element

#bold.disabled {
   background-position: 0 -29px;
}

Updated Fiddle