CODEWITHSUNDEEP
jqueryhtmlcss
Blankman
Blankman

Reputation: 267200

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

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.

Upvotes: 0

Views: 175

Answers (2)

mattk
mattk

Reputation: 1365

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.

Upvotes: 1

Martin
Martin

Reputation: 10563

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.

Upvotes: 0

Related Questions