<ol> with numbers another color

Html Problem Overview

<ol>
   <li>test</li>
   <li>test</li>
</ol>

will show as:

test
test

I want to have numbers coloured and text black!

I can edit the css, but I do not have access to the HTML.

Html Solutions

Solution 1 - Html

The CSS spec gives an example of doing just this. Unfortunately, while it works on Firefox 3, it doesn't appear to work on IE7:

<html>
<head>
    <style>
        ol { counter-reset: item; }
        ol li { display: block; }
        ol li:before {
            content: counter(item) ". ";
            counter-increment: item;
            color: red;
        }
    </style>
</head>
<body>
    <ol>
        <li>item</li>
        <li>item</li>
        <li>item</li>
    </ol>
</body>
</html>

Solution 2 - Html

Not sure if this works but i think it should:

<li style='color: red;'><span style='color:black;'>test</span></li>

edit
If you cannot edit the html then I'm afraid it's not possible. If you could add javascript to the HTML (once in the head) then you could do it like this:

$(document).ready( function() {
 $('ol li').wrapInner('<span class="black"> </span>').addClass('red');
});

You will need the jQuery library for this.
Then in your CSS just set up a red and a black class with color:red/black declarations.

Solution 3 - Html

Modern Approach (2021) - ::marker pseudo-element

The introduction of the ::marker pseudo-element makes changing the color (and other styling) of numbers in an ordered list far simpler.

Example:

ol li::marker {
    color: red;
}

Modern browsers already support use of ::marker: https://caniuse.com/css-marker-pseudo

We're at a point where older solutions (workarounds) are no longer necessary and most sites can be comfortable using ::marker today.

Keep in mind that not all properties are available on the marker tag. See the MDN docs for more detail: https://developer.mozilla.org/en-US/docs/Web/CSS/::marker

Solution 4 - Html

Here's a solution that also wraps the text for each list item left-aligned below the first line (and not below the list number):

HTML

<ol class="GreenNumbers">
   <li>Long text that might wrap onto a second line.</li>
   <li>Long text that might wrap onto a second line.</li>
   <li>Long text that might wrap onto a second line.</li>
</ol>

CSS

.GreenNumbers {
	list-style-type: none;
}
.GreenNumbers ol {
	margin-left: 2em;
}
.GreenNumbers li {
	counter-increment: count-me;
}
.GreenNumbers li::before {
	content: counter(count-me) ". ";
    display: block;
    position: relative;
    max-width: 0px;
    max-height: 0px;
    left: -1.3em;
	top: .05em;
    color: #008000;
	font-weight: bold;
}

Solution 5 - Html

This should do what you're looking for:

http://archivist.incutio.com/viewlist/css-discuss/67894

HTML

<ol>
    <li>1 some text here</li>
    <li>2 some more text that can span longer than one line</li>
</ol>

CSS

ol { list-style: none; padding-left: 2em; text-indent: -1em;}

li:first-letter { float: left; 
                  font-size: ??; 
                  color: white; 
                  background: orange; 
                  line-height: 1.0; }

Except you'll want to change the color and background according to your design.

This next one is overkill, but gives you a great deal of information on how to style lists:

http://print.wordpress.com/2006/02/22/css-beautifully-numbered-lists/

-Adam

Solution 6 - Html

@kdgregory 's code worked for me, but it affected my bulleted lists. I changed li to ol li to prevent the bullet items from being affected. Like so:

ol { counter-reset: item }
ol li { display: block }
ol li:before { content: counter(item) ". "; counter-increment: item; color: red; }

P.S. I also prefer to use uppercase in CSS for elements like BODY so I can easily distinguish it from classes .body and ids #body.

Solution 7 - Html

From an answer to a similar question I found elsewhere:

> Just as a side note, CSS3 will allow easy styling of list markers with the > ::marker pseudo-element.

But for now it looks like you'd have to add the <span> to your html.

Solution 8 - Html

To expand a bit on what others said, as well as additional question clarifications, there is no built-in way of doing this from CSS w/o touching the HTML. If you are looking to keep the HTML as clean and semantic as possible, I would do the styling using javascript, probably with a library like jQuery, to adjust the DOM so that the css can be more effective.

I would caution, however, using color to convey info. I'm not sure what the purpose of the colored numbers is, but using color to display information leaves colorblind users out of the loop and is a big no no for accessibility.

Solution 9 - Html

too bad you can't edit the html... how about js?

<script>
var x = document.getElementsByTagName('li');
for (i=0; i<x.length; i++) { x[i].innerHTML ="<span>" + x[i].innerHTML + "</span>" }

// or with jQuery
$('.li').each(function(){this.innerHTML="<span>" + this.innerHTML + "</span>" })
</script>

<style>
li {color: #DDD;}
li span {color: black;}
</style>

if not, maybe a good-enough solution would be

ol {background-color: #DDD;}
li {background-color: white;}

Solution 10 - Html

html:

    <ol>
    <li>1 A long bullet here it is long to show how it behaves on a second line</li>
    <li>2 A long bullet here it is long to show how it behaves on a second line</li>
    <li>3 A long bullet here it is long to show how it behaves on a second line</li>
    <li>4 A long bullet here it is long to show how it behaves on a second line</li>
    <li>5 A long bullet here it is long to show how it behaves on a second line</li>
    </ol>

css:


ol { list-style: none; padding-left: 10px; text-indent:0px; margin-left:5px;}
ol li {color:#666;}
ol li:first-letter {color:#69A8DE; padding-right:5px; margin-left:-15px;}

Solution 11 - Html

In CSS change the color of your ul li{ color: yourcolor} In html put a span in the li with a class and give it another color. It works for any list-style that its not and image.

Solution 12 - Html

It's a bit late for this but I want to share it with the community, took me a long while to do this. I found a solution to change the OL numbers background and color that works on every browser. Requires an extra tag inside the li.

See it here

Solution 13 - Html

This is easy, as long as you don't want to assign different colours to different list item numbers. No HTML modifications necessary. Might not work in 100% of browsers though..

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

Content Type	Original Author	Original Content on Stackoverflow
Question	depo	View Question on Stackoverflow
Solution 1 - Html	kdgregory	View Answer on Stackoverflow
Solution 2 - Html	Pim Jager	View Answer on Stackoverflow
Solution 3 - Html	Nathan Dawson	View Answer on Stackoverflow
Solution 4 - Html	Peter Lairo	View Answer on Stackoverflow
Solution 5 - Html	Adam Davis	View Answer on Stackoverflow
Solution 6 - Html	Kimball	View Answer on Stackoverflow
Solution 7 - Html	notruthless	View Answer on Stackoverflow
Solution 8 - Html	cdeszaq	View Answer on Stackoverflow
Solution 9 - Html	y34h	View Answer on Stackoverflow
Solution 10 - Html	joe	View Answer on Stackoverflow
Solution 11 - Html	Abiel	View Answer on Stackoverflow
Solution 12 - Html	caiocpricci2	View Answer on Stackoverflow
Solution 13 - Html	D. Starr	View Answer on Stackoverflow