HTML and CSS

li vs li li

Please support our HTML and CSS advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

Thread Solved

•

Join Date: Feb 2008

Posts: 630

Reputation: daviddoria is a jewel in the rough

Solved Threads: 46

daviddoria daviddoria is offline

Offline

Practically a Master Poster

li vs li li

Dec 12th, 2008

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

Help with Code Tags

HTML and CSS Syntax (Toggle Plain Text)

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

Now these two thing I was confused about:

Help with Code Tags

HTML and CSS Syntax (Toggle Plain Text)

#sidebar li ul {
	padding: 0 30px 40px 30px;
}

Help with Code Tags

HTML and CSS Syntax (Toggle Plain Text)

#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

•

Join Date: Nov 2007

Posts: 596

Reputation: buddylee17 has a spectacular aura about

Solved Threads: 125

buddylee17 buddylee17 is offline

Offline

Posting Pro

Re: li vs li li

Dec 13th, 2008

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

Lost time is never found again.
- Benjamin Franklin

•

Join Date: Feb 2008

Posts: 630

Reputation: daviddoria is a jewel in the rough

Solved Threads: 46

daviddoria daviddoria is offline

Offline

Practically a Master Poster

Re: li vs li li

Dec 13th, 2008

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

•

Join Date: Apr 2007

Posts: 437

Reputation: Fungus1487 is on a distinguished road

Solved Threads: 50

Fungus1487 Fungus1487 is offline

Offline

Posting Pro in Training

Re: li vs li li

Dec 13th, 2008

css works by nesting. so...

•

Originally Posted by daviddoria

ul li

"li" is found below "ul"

•

Originally Posted by daviddoria

li li

"li" is found below "li"

Example

 Help with Code Tags 
 HTML and CSS Syntax (Toggle Plain Text) 
<div>
  <ul>
    <li>
      <ul>
        <li>Text 01</li>
      </ul>
    </li>
    <li>Text 02</li>
  </ul>
</div>
<div>
  <ul>
    <li>
      <ul>
        <li>Text 01</li>
      </ul>
    </li>
    <li>Text 02</li>
  </ul>
</div>

Help with Code Tags

HTML and CSS Syntax (Toggle Plain Text)

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.

When Autumn Falls [ http://www.whenautumnfalls.co.uk ] &&
Designdotworks [ http://www.designdotworks.co.uk ] Web / Graphic / Software Design