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.
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.