Welcome to WebmasterWorld Guest from

Forum Moderators: open

Message Too Old, No Replies

Using JavaScript CSS to change color of child item



5:29 pm on Nov 8, 2006 (gmt 0)

10+ Year Member

I have a link with an id, wrapped by a list item.

<li id="i"><a href="...">...</a></li>

Using CSS, I can control the color of the link by using the following command:

#i a{color:#abcdef}

Using JavaScript CSS, I can control the color of the list item using:


But how can I use JavaScript CSS to control the color of the link in the list item id?



5:45 pm on Nov 8, 2006 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member

Hi there Jeremy_H,

does this help...

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script type="text/javascript">
return false;


<li id="foo"><a href="#">click this link</a></li>
<li id="i"><a href="#">to change this color</a></li>




6:19 pm on Nov 8, 2006 (gmt 0)

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

You could get the child <a> nodes of that list item.

var li = document.getElementById("i");
var anodes = li.getElementsByTagName("a");

Then loop through anodes and apply the style that way. Though you'd probably be better off defining a class and just assigning that class to the list item. For example:

li.selectedItem a { color: #abcdef; }

And then just attach the class to the list item instead of trying to directly modify the style attribute. Easier to maintain.


Featured Threads

Hot Threads This Week

Hot Threads This Month