Specifying multi css class in stylesheet

Question

Good Day.

I have an element that has two three classes assigned to it. Two are assigned in the html, and one is assigned by jQuery as an active class.

Now I want to specify, in CSS, a hover effect but to the one specific element: The "menuItem first" class...

HTML:

<ul>     
  <li class="menuItem first"><a href=""><img src="img/sample_slides/1.png" alt="thumbnail" /></a></li>
  <li class="menuItem"><a href=""><img src="img/sample_slides/1.png" alt="thumbnail" /></a></li>
  <li class="menuItem"><a href=""><img src="img/sample_slides/1.png" alt="thumbnail" /></a></li>
  <li class="menuItem"><a href=""><img src="img/sample_slides/1.png" alt="thumbnail" /></a></li>
</ul>

CSS:

li.act,li.act:hover{
    /* The active state of the thumb */
    background:url(img/active_bg2.png) no-repeat;
}

li.act .first, li.act .first:hover{
    /* The active state of the thumb - first class only! */
    background:url(img/active_bg1.png) no-repeat;
}

I know the css right above is wrong. What is the right annotation?
Remember that the .act class is assigned by jQuery to the active element...

Extra space in between .act and .first...

Derek 朕會功夫
– Derek 朕會功夫

2013-02-25 06:13:11 +00:00
Commented Feb 25, 2013 at 6:13 — Derek 朕會功夫
– Derek 朕會功夫, Commented Feb 25, 2013 at 6:13
li.act,li.act:hover is equivalent to li.act

Musa
– Musa

2013-02-25 06:14:39 +00:00
Commented Feb 25, 2013 at 6:14 — Musa
– Musa, Commented Feb 25, 2013 at 6:14

Richard Neil Ilagan · Accepted Answer · 2013-02-25 06:12:37Z

5

When you say

li.act .first

what you're really saying is "the element with class first inside an <li> element with class act".

If you want to say "the element with both first and act classes, you'd want to write them out without spaces:

li.act.first

Following that, to achieve a hover ruleset for said selector, you can just append the pseudo :hover as always:

li.act.first:hover

answered Feb 25, 2013 at 6:12

Richard Neil Ilagan

14.8k6 gold badges52 silver badges68 bronze badges

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

1 Comment

David Van Staden Over a year ago

Thank you. Appreciate your answer

MikeM · Accepted Answer · 2013-02-25 06:11:57Z

3

you have an extra space in your selector

use

li.act.first, li.act.first:hover{
    /* The active state of the thumb - first class only! */
    background:url(img/active_bg1.png) no-repeat;
}

selector li.act.first means the li element has both act and first in the class property.

answered Feb 25, 2013 at 6:11

MikeM

27.5k4 gold badges67 silver badges80 bronze badges

Comments

lukeocom · Accepted Answer · 2013-02-25 06:31:06Z

0

What you have at the moment is setting the same background colour for both states. So instead you would use,,

.first{background-color:#faa;}
.first:hover{background-color:#afa;}

Im using background-color here just as a working example, http://jsfiddle.net/mshtT/

answered Feb 25, 2013 at 6:31

lukeocom

3,2533 gold badges20 silver badges30 bronze badges

Comments

Achrome · Accepted Answer · 2013-02-25 07:33:54Z

0

When you write li class="menuItem first like the way you did in your first li element in HTML, menuItem and first become two separate classes. To apply the hover effect in just one element you can just use the following CSS

.first:hover {
    /*the effect you want*/ (eg. Background: #444;)
}

It would only apply to the element that has the first class in it, that is your first element.

edited Feb 25, 2013 at 7:33

Achrome

7,82114 gold badges38 silver badges45 bronze badges

answered Feb 25, 2013 at 7:12

Khushnood Qadir

1

1 Comment

David Van Staden Over a year ago

thanks, understand your logic, but there are two classes involved, and both needs to be applied when the hover effect happens...The other class is .act, whic is applied by jquery addClass and removeClass

Collectives™ on Stack Overflow

Specifying multi css class in stylesheet

4 Answers 4

1 Comment

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related