Ad:

HTML and CSS Discussion Thread
Marked Solved
Views: 812

Dec 12th, 2008

li vs li li

Expand Post »

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

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:

HTML and CSS Syntax (Toggle Plain Text)

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

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

daviddoria

Featured Poster

Reputation Points: 437

Solved Threads: 204

Posting Virtuoso

Offline

1,968 posts
since Feb 2008

Permalink

Dec 13th, 2008

Re: li vs li li

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

buddylee17

Reputation Points: 232

Solved Threads: 137

Practically a Master Poster

Offline

665 posts
since Nov 2007

Permalink

Dec 13th, 2008

Re: li vs li li

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

daviddoria

Featured Poster

Reputation Points: 437

Solved Threads: 204

Posting Virtuoso

Offline

1,968 posts
since Feb 2008

Permalink

Dec 13th, 2008

Re: li vs li li

css works by nesting. so...

Click to Expand / Collapse Quote originally posted by daviddoria ...

ul li

"li" is found below "ul"

Click to Expand / Collapse Quote originally posted by daviddoria ...

li li

"li" is found below "li"

Example

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>

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.

Fungus1487

Reputation Points: 66

Solved Threads: 56

Posting Pro in Training

Offline

459 posts
since Apr 2007

Permalink

Dec 13th, 2008

Re: li vs li li

fantastic, thanks!

daviddoria

Featured Poster

Reputation Points: 437

Solved Threads: 204

Posting Virtuoso

Offline

1,968 posts
since Feb 2008

This thread is solved

Either the thread starter or a moderator has marked this thread as solved. You can most likely trust the responses and answers given. There is most likely no reason for any further responses to be posted here. If you have a related question, please start a new thread in this forum instead.

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.

Previous Thread in HTML and CSS Forum Timeline: Multiple styles of list in 1 css file

Next Thread in HTML and CSS Forum Timeline: missing background

DaniWeb Message

Cancel Changes

User Name
Password