[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