[thelist] Separate text node from containing element using JS?

Barney Carroll barney at textmatters.com
Mon Mar 12 11:40:15 CDT 2007


Calling people with an understanding of DOM:

I've been scratching my head with this little dilemma. I want to create 
OLs with numeric markers that are a different colour from the LI content.

CSS doesn't cater for list marker color properties, there is only LI to 
define at best. A simple solution would involve something like this:

<ol>
<li><span>Preface</span></li>
<li><span>Introduction</span></li>
<li><span>Chapter 1</span></li>
</ol>

li{color:red;}
li span{color:black;}


...However I am writing this for a very simple CMS and inserting the 
spans and making sure the text is in them is beyond my means. Use of 
list-style-image and adjacent selectors is also out because my user base 
is on IE (as ever).

So I was wondering if I could keep the rules for OL or LI with the 
desired marker colour, and then somehow style just the text node within. 
This selector would allow me to get away without extra markup and keep 
to reliable CSS2.1, but I'm just a script kiddy when it comes to JS so I 
don't even know if it's possible.

Any advice?


Cheers,
Barney



More information about the thelist mailing list