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?

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.

<!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

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.

<!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:

<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.

.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.

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.

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.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.