13 June 2008
Styling List Items Seperately
I was wrapping up on a project, and the time came where the color on the lists (1, 2, 3) needed to be different colors than the actual <li> inside needed to be. The only solution is to wrap any content inside the <li> with some sort of tag to target the text to change the color. Although that has no problem at all, what if this needs to be site wide? It will be very cumbersome to remember, let alone do it to every list you create.
I decided to use JavaScript to search for every <ol> and for every <li> inside of it, then it goes ahead and wraps it in the selector that changes it back to default color. In this case its a <span>.
This is what it does, this will be the before HTML:
<ol> <li>Item text goes here</li> <li>Item text goes here</li> <li>Item text goes here</li> <li>Item text goes here</li> </ol>
And, after the JavaScript does its thing:
<ol> <li><span>Item text goes here</span></li> <li><span>Item text goes here</span></li> <li><span>Item text goes here</span></li> <li><span>Item text goes here</span></li> </ol>
Here is the JavaScript:
window.onload = function () {
var li = document.getElementsByTagName('ol');
for(i=0;i<li.length;i++) {
if(li[i].childNodes[1].nodeName == 'LI') {
var li_count = li[i].childNodes.length;
for(b=0;b<li_count;b++) {
li[i].childNodes[b].innerHTML = '<span>'+li[i].childNodes[b].innerHTML+'</span>';
}
}
}
};
Here is the CSS:
.container ol {
padding: 8px 10px 8px 25px;
list-style-type: decimal;
color: #c19203;
font-weight: bold;
}
.container li {
padding: 4px 0;
}
.container ol span {
font-weight: normal;
color: #333;
}
