li vs li li

[daviddoria]

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?

Thanks!

Dave

[buddylee17]

li-list item; ul- unordered list; They are used to create a list in html.
Read more at http://www.w3schools.com/TAGS/tag_li.asp

[daviddoria]

right, but i asked what
ul li
and
li li
are?

[Fungus1487]

css works by nesting. so...

ul li

"li" is found below "ul"

li li

"li" is found below "li"

Example

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

ul li {
  color:#aaaaaa;
}

ul ul li {
  color:#ff3333;
}

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.

[daviddoria]

fantastic, thanks!