HTML and CSS

List items: pointing to a specific li

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

•

Join Date: Oct 2007

Posts: 260

Reputation: Venom Rush is an unknown quantity at this point

Solved Threads: 2

Venom Rush Venom Rush is offline

Offline

Posting Whiz in Training

List items: pointing to a specific li

Jul 14th, 2009

Hi there

I've been trying to find out how to point to a specific li in a list but no matter what search term I use in google I cant find what I'm looking for.

Basically I want to point to a specific li using css. So for instance I have 5 list items and I want to style list item 3. How would I go about pointing to that specific li?

This user has a spatula. We don't know why, but we are afraid.

•

Join Date: Apr 2009

Posts: 859

Reputation: Airshow is on a distinguished road

Solved Threads: 122

Airshow

Online

Practically a Posting Shark

Re: List items: pointing to a specific li

Jul 14th, 2009

Venom,

Give the li in question a class name that is different from the other lis in the list, than address it by that class name in css.

 Help with Code Tags 
 HTML and CSS Syntax (Toggle Plain Text) 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Airshow :: Untitled</title>
<style type="text/css">
li.normal { color:green; }/*style as required*/
li.special { color:red; font-weight:bold; }/* something special for one or more particular items */
</style>
</head>
 
<body>
 
<ul>
	<li class="normal">List item 1</li>
	<li class="normal">List item 2</li>
	<li class="special">List item 3</li>
	<li class="normal">List item 4</li>
	<li class="normal">List item 5</li>
</ul>
 
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Airshow :: Untitled</title>
<style type="text/css">
li.normal { color:green; }/*style as required*/
li.special { color:red; font-weight:bold; }/* something special for one or more particular items */
</style>
</head>

<body>

<ul>
	<li class="normal">List item 1</li>
	<li class="normal">List item 2</li>
	<li class="special">List item 3</li>
	<li class="normal">List item 4</li>
	<li class="normal">List item 5</li>
</ul>

</body>
</html>

Airshow

50% of the solution lies in accurately describing the problem!

•

Join Date: Oct 2007

Posts: 260

Reputation: Venom Rush is an unknown quantity at this point

Solved Threads: 2

Venom Rush Venom Rush is offline

Offline

Posting Whiz in Training

Re: List items: pointing to a specific li

Jul 14th, 2009

•

Originally Posted by Airshow

Venom,

Give the li in question a class name that is different from the other lis in the list, than address it by that class name in css.
Help with Code Tags

HTML and CSS Syntax (Toggle Plain Text)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Airshow :: Untitled</title>
<style type="text/css">
li.normal { color:green; }/*style as required*/
li.special { color:red; font-weight:bold; }/* something special for one or more particular items */
</style>
</head>
 
<body>
 
<ul>
	<li class="normal">List item 1</li>
	<li class="normal">List item 2</li>
	<li class="special">List item 3</li>
	<li class="normal">List item 4</li>
	<li class="normal">List item 5</li>
</ul>
 
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Airshow :: Untitled</title> <style type="text/css"> li.normal { color:green; }/*style as required*/ li.special { color:red; font-weight:bold; }/* something special for one or more particular items */ </style> </head> <body> <ul> <li class="normal">List item 1</li> <li class="normal">List item 2</li> <li class="special">List item 3</li> <li class="normal">List item 4</li> <li class="normal">List item 5</li> </ul> </body> </html>
Airshow

Hi Airshow, thanks for your reply. Your solution would have been my choice if my list was static. However this isn't the case.

I know there's a way in CSS to point to a specific li. Take the following code for instance:

 Help with Code Tags 
 html Syntax (Toggle Plain Text) 
<ul class='parent'>
  <li>Copy goes here.
    <ul>
      <li>item 1</li>
      <li>item 2</li>
    </ul>
  </li>
</ul>
<ul class='parent'>
  <li>Copy goes here.
    <ul>
      <li>item 1</li>
      <li>item 2</li>
    </ul>
  </li>
</ul>

The css below targets the li's with item 1 and item 2 enclosed in them.

 Help with Code Tags 
 css Syntax (Toggle Plain Text) 
.parent li ul li {
  /* css properties goes her */
}
.parent li ul li {
  /* css properties goes her */
}

So using the example above, I just want to point to item 2. I hope that makes sense.

This user has a spatula. We don't know why, but we are afraid.

•

Join Date: Jan 2007

Posts: 276

Reputation: kanaku is on a distinguished road

Solved Threads: 15

kanaku

Offline

Posting Whiz in Training

Re: List items: pointing to a specific li

Jul 14th, 2009

Maybe you want to work with pseudo-classes? But I think they have a sketchy implementation in IE6-7 or lower. Anyway, the only pseudo-class I've seen that might apply is the first-child pseudoclass. And there's no second-child pseudoclass. =(

maybe you can use javascript and detect the 2nd element of the array containing the list items... but that's too complicated.

How are you implementing the dynamic generation? Perhaps there's a way to mark item2 before the html code is generated.

If you know ASP, you can save other daniweb members from idiots like me by helping out in this forum.

Visit this thread if your username starts with one of the following letters: B D F H J L N P R T X Y Z.

•

Join Date: Apr 2009

Posts: 859

Reputation: Airshow is on a distinguished road

Solved Threads: 122

Airshow

Online

Practically a Posting Shark

Re: List items: pointing to a specific li

Jul 14th, 2009

Venom,

Yes that makes sense. Trouble is you can't address a specific li in a list unless it is the first-child (pseudo-class).

So you come back to having to give your target li a class (or an id) such that it can be addressed in css.

You say the list is dynamic. You need to inject a class/id wherever the list is built. If it is built in javascript you could also style it directly with emement.style.whatevere.... but this is cumbersome compared with giving it a .styleName .

Airshow

edit: more or less exactly what kanaku says above.

Last edited by Airshow; Jul 14th, 2009 at 8:23 am.

50% of the solution lies in accurately describing the problem!