homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

Using JavaScript CSS to change color of child item

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

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)

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)

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.

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved