CODEWITHSUNDEEP
htmlcsscss-selectorshtml-lists
Parijat Kalia
Parijat Kalia

Reputation: 5095

Applying different style rules to different elements

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.

Upvotes: 2

Views: 272

Answers (5)

Cody Guldner
Cody Guldner

Reputation: 2896

The problem is that you selected the ul that is a descendent of slide, but your ul has an id of slide, so it doesnt work, because there is no ul that has a container with an id of slide. Also by putting ,li you are selecting all list items on the page. You want to have #slide li, which will only select the list items with a container id of slide. You don't need the #slide ul so your final code should be

#slide li {
float:left;
}

http://jsfiddle.net/G7JHK/6/


As an alternative, you could use ul:nth-of-type(2) instead of an id to save some space in the html http://jsfiddle.net/G7JHK/7/

Upvotes: 1

Codegiant
Codegiant

Reputation: 2150

There is problem of your selector. class or id of same element never separated by a white space. They should be with no space and the child are separated by a space but no ',' will not be used there.. So you can try this in your code

ul.stack li{
display:block;
}
ul#slide li{
float:left;
}

Also you have to place the HTML tag name first and then the preceding attribute.

Upvotes: 3

user1636130
user1636130

Reputation: 1683

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 :) ​

Upvotes: 5

corymathews
corymathews

Reputation: 12619

I think you want something like:

ul.stack li{
  display:block;
}
ul#slide li{
  float:left;
}

Look at the selectors. You want to select a ul with class stack (ul.stack) and find its child li.

Upvotes: 3

chrisbulmer
chrisbulmer

Reputation: 1245

Your CSS should be like so

ul.stack li{
  display:block;
}
ul#slide li{
  float:left;
}

​

Upvotes: 4

Related Questions