Applying two CSS styles at once using jQuery

Question

I'm developing a webchat system which shows the current 'members' of the chat as a unordered list. A chat member can either be a standard member of the public, a moderator or a police officer. So each list item has a different style:

<ul id="MembersList ">
<li class="Police">Mr Policeman</li>
<li class="Moderator">Mr Moderator</li>
<li class="Member">Joe Bloggs 1</li>
<li class="Member">Joe Bloggs 2</li>
<li class="Member">Joe Bloggs 3</li>
</ul>

#MembersList li.Member
{
    list-style-image: url(images/member.png);
}

#MembersList li.Moderator
{
    list-style-image: url(images/member_moderator.png);
}

#MembersList li.Police
{
    list-style-image: url(images/member_police.png);
}

That works fine :) Giving each member their own little icon.

Here's where it gets tricky. When a member is typing jQuery adds an additional style to that member, so the list item effectivily changes to this:

<li class="Member Typing">Joe Bloggs 3</li>

What I now want to achieve is to change the list item icon, but have it show a different icon depending on the member type. So have something like the following CSS:

#MembersList li.Member .Typing
{
    list-style-image: url(images/member_typing.png);
}

#MembersList li.Moderator .Typing
{
    list-style-image: url(images/member_moderator_typing.png);
}

#MembersList li.Police .Typing
{
    list-style-image: url(images/member_police_typing.png);
}

Except that the above CSS doesn't work.

So please could a CSS guru explain to me the correct CSS to use in this instance? Thanks!

Dykam · Accepted Answer · 2009-08-05 10:17:53Z

4

Without the space, .classnameone.classnametwo:

#MembersList li.Member.Typing
{
    list-style-image: url(images/member_typing.png);
}

#MembersList li.Moderator.Typing
{
    list-style-image: url(images/member_moderator_typing.png);
}

#MembersList li.Police.Typing
{
    list-style-image: url(images/member_police_typing.png);
}

When you do something like the following, .classnameone .classnametwo, you specify an element with the class .classnametwo being a child of one with the class .classnameone

answered Aug 5, 2009 at 10:17

Dykam

10.3k4 gold badges29 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Dykam Over a year ago

No problem. Tough I'm not a sir, makes me feel to be an adult.

Collectives™ on Stack Overflow

Applying two CSS styles at once using jQuery

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related