Display default icon, and replace icon if class is set on div

Question

I want to create a div tag that has an icon to the left, and some text.

Now using jquery, if an event occurrs, I am adding a class to this div tag so that the icon is replaced with another icon.

I have the jquery side of things, but I'm not sure how to do this via CSS.

my css:

<div id="tag-user" class="usertag selected">Some tag</div>

.usertag
{
    background:url("/Images/tag.png") no-repeat;
}

.usertag .selected
{
    background:url("/Images/tag-selected.png") no-repeat;
}

The image doesn't seem to be appearing, so I guess my css is wrong.

Answer 1

Try remove the slash before Images. e.g.

background:url("Images/tag-selected.png") no-repeat;

You are defining an absolute path there. You need to use a relative path to your images.

Answer 2

You have a space between your class names, it should be

.usertag.selected

because .selected is on the same element as .usertag.

.usertag .selected matches elements with .selected class which are inside .usertag.

Be aware that multiple class selectors do not work in ie6 and below. If you need compatibility with downlevel browsers consider applying usertag-selected and change your css to

.usertag
{
    background:url("/Images/tag.png") no-repeat;
}

.usertag-selected
{
    background:url("/Images/tag-selected.png") no-repeat;
}

usertag-selected will override usertag as it is declared later.