0

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

3
Contributors
4
Replies
5
Views
9 Years
Discussion Span
Last Post by daviddoria
2

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.

Votes + Comments
looks like you solved this one
Great answer.
This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.