Adding a CSS sublcass to a CSS item used in javascript?

Question

First time using CSS so my question may not make sense. I am using a menu template that uses javascript to slide CSS items around. I have multiple items next to each other and I wanted to alternate the background by making a subclass for the item(eg: .cc_item .odd{ background:#fff}).

style:

.cc_item{
text-align:center;
width:140px;
height:600px;
float:left;
border-bottom:1px solid #000;
background:#e8c486 url(../images/menuBack.jpg) repeat top left;
position:relative;
-moz-box-shadow:3px -3px 10px #000;
-webkit-box-shadow:3px -3px 10px #000;
box-shadow:3px -3px 10px #000;

}

html:

       <div class="cc_item" style="z-index:6;">
            <img src="images/1.jpg" alt="image" />
            <span class="cc_title">Pizza</span>
            <div class="cc_submenu">
                <ul>
                    <li class="cc_content_1">Pizzas</li>
                    <li class="cc_content_2">Calzones</li>
                </ul>
            </div>
        </div>

I want to add a .odd{ } to the cc_item so in the html I can specify the "odd" cc_item class. I've tried a couple things, but can't seem to get it to work.

1. I don't know the proper way to add a subclass to a css item. I've done it with my table stylesheet, but the "." in front of the cc_item is throwing me off(sorry...really new).
2. I don't know where to specify the "class=odd" in the html.
3. I don't know if I make these changes the javascript that uses cc_item will be affected.

Thanks.

Answer 1

I don't think there is any such thing as a CSS subclass.. but try this

Add a new .cc_item_odd{...} AFTER your existing Close Brace } (I would not just call it .odd because that is less descriptive and more conflict prone since there are no subclasses)

When you change your class set class="cc_item cc_item_odd" That is how you apply more than one class. I am not sure how your JavaScript is doing the lookup, but I think it will be unaffected

Answer 2

You can give an element multiple classes like so:

 <div class="cc_item odd" style="z-index:6;">

Just separate them by spaces.

To refer to that code using CSS or jQuery, you can chain classes together and refer to them like so:

.cc_item.odd { /*styles go here*/ } or $('.cc_item.odd')

That will hit anything with both classes. And if you want this to work in IE6, read the instructions here: http://www.oppenheim.com.au/2009/05/24/multiple-css-classes-a-little-known-ie6-hack/

Also, just an FYI - when you use jQuery's addClass() method it will automatically add the space between the classes for you, so all you need to pass through is the odd class.