I am very new to css. I was looking at a css file I found online and trying to figure out what everything does. I am confused with the following couple of things. Please let me know if anything I say is wrong!

This on sets up some properties of a list item in a <div id="sidebar"> environment

#sidebar li {
	margin-bottom: 10px;
	background: url(images/img10.gif) no-repeat left bottom;

Now these two thing I was confused about:

#sidebar li ul {
	padding: 0 30px 40px 30px;
#sidebar li li {
	margin: 0;
	padding-left: 30px;
	background: url(images/img12.gif) no-repeat 5px 50%;

What is a li ul? and an li li?



Recommended Answers

All 4 Replies

right, but i asked what
ul li
li li

css works by nesting. so...

ul li

"li" is found below "ul"

li li

"li" is found below "li"


        <li>Text 01</li>
    <li>Text 02</li>
ul li {

ul ul li {

The style for "ul li" will set all "li" elements found under a "ul" element to the color "#aaaaaa" in the example above this means all text will be of the color "#aaaaaa".

The second style for "ul ul li" will set all "li" elements found under a "ul" which is found under a "ul" to the color "#ff3333". Only the text "Text 01" will be of this color as it is the only "li" element that has been nested within two "ul" tags.

Hope this helps clarify.

commented: Great answer. +1
commented: looks like you solved this one +3

fantastic, thanks!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.