Ad:

HTML and CSS Discussion Thread
Unsolved
Views: 1013

Jul 14th, 2009

List items: pointing to a specific li

Expand Post »

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?

Similar Threads

adding list items in Python
Should items table be divided into categories?? in Database Design
Items with some, but not all, fields in common in Database Design
Go to specific control in VB.NET
Style for just numbers in ol lists in HTML and CSS

Venom Rush

Reputation Points: 18

Solved Threads: 2

Posting Whiz

Offline

325 posts
since Oct 2007

Permalink

Jul 14th, 2009

Re: List items: pointing to a specific li

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.

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

Sponsor

Reputation Points: 302

Solved Threads: 358

WiFi Lounge Lizard

Offline

2,524 posts
since Apr 2009

Permalink

Jul 14th, 2009

Re: List items: pointing to a specific li

Click to Expand / Collapse Quote 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.
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:

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.

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.

Venom Rush

Reputation Points: 18

Solved Threads: 2

Posting Whiz

Offline

325 posts
since Oct 2007

Permalink

Jul 14th, 2009

Re: List items: pointing to a specific li

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.

kanaku

Reputation Points: 70

Solved Threads: 15

Posting Whiz

Offline

378 posts
since Jan 2007

Permalink

Jul 14th, 2009

Re: List items: pointing to a specific li

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.

Airshow

Sponsor

Reputation Points: 302

Solved Threads: 358

WiFi Lounge Lizard

Offline

2,524 posts
since Apr 2009

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: Css border showing double

Next Thread in HTML and CSS Forum Timeline: Within a <td>, how do I call a Javascript function on ANY event?

DaniWeb Message

Cancel Changes

User Name
Password