Applying different style rules to different elements

Question

I have a bunch of unordered list elements that are stacked side by side with each other. To accomplish this, the style rule typically applied is:

#slide ul,li{
float:left;
list-style-type:none;
}

I need to introduce another unordered list of elements that behave the way the ul and li element typically do; that is stacked on top of each other but without any list-style-type, and to achieve this:

.stack ul,li{
list-style-type:none
}
​

The problem is that the styles of stack class for ul,li do not apply and the elements stack next to each other as they are being in the case of ul,li for #slide.

Check it out on this js fiddle:

http://jsfiddle.net/G7JHK/

Are my selectors wrong?

P.S: I have tried this out with class/id and various combination of both but the result is always the same.

Answer 1

Because of the comma in your selector you were applying float left to all li elements. Try something like this:

<ul class="stack">
<li>element 1</li>
<li>element  2</li>
</ul>
<br/>
<ul id="slide">
<li>element 3</li>
<li>element  4</li>
</ul>


#slide li{
 display:inline;   
}

This css will make all list elements in the div 'slide' display in a row and all other list elements will continue to display like normal. It saves you having to use two different classes :) ​