with numbers another color

Question

<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.

score 123 · Answer 1 · edited Aug 13 '15 at 17:17

123

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>

edited Aug 13 '15 at 17:17

feelinferrety

197
1
14

answered Jan 28 '09 at 19:35

kdgregory

38,754
10
77
102

1

My only beef with the solution above is that any `
` items inside of a `

Martyn Chamberlin

Aug 12 '15 at 16:46

1

@MartynChamberlin in a real-world implementation you would use selectors to specify where this styling should be applied. – kdgregory Aug 15 '15 at 11:22

@kdgregory Well, @feelinferrety updated his answer yesterday. It used to be that adding selectors to his solution broke it for `ol`, but I see that he fixed that problem. Rock on... – Martyn Chamberlin Aug 16 '15 at 13:38

2

@MartynChamberlin @kdgregory another approach would be to use the child combinator, so `ol > li` and `ol > li::before` -- that way you only target this specific level of `li` elements. – Erwin Wessels Oct 24 '17 at 06:22

Really Awesome .. Works Perfect ... Thanks – Jawad Abdani Jan 17 '18 at 12:42

Nathan Dawson · Answer 2 · 2021-05-31T15:34:32.727

32

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

edited May 31 '21 at 15:34

answered Jan 14 '21 at 22:02

Nathan Dawson

18,138
3
52
58

3

Wow, didn't think this would work with such complicated answers around it. Thank you for this simple answer. – rishi Jan 25 '21 at 16:53
4

This should be changed to the correct answer, as per 2021. – Alexandre Aimbiré Aug 18 '21 at 22:21

Pim Jager · Answer 3 · 2009-01-28T19:16:49.160

29

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.

edited Jan 28 '09 at 19:16

answered Jan 28 '09 at 18:50

Pim Jager

31,965
17
72
98

I wouldn't suggest inline-styles, but this is essentially the best option. – Sampson Jan 28 '09 at 19:17
1

Inline styles was just to show how to do it, you should of course use classes as I do in the javascript example. – Pim Jager Jan 28 '09 at 20:09

score 19 · Answer 4 · answered Oct 10 '14 at 12:08

19

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;
}

answered Oct 10 '14 at 12:08

Peter Lairo

331
2
8

1

This is the cleanest answer here! The css `counter()` has [97% support](http://caniuse.com/#search=counter), too. Spot on. – Cameron Hurd Apr 14 '15 at 10:57
2

It's worth noting, however, that the [`direct-descendant` selector](http://www.w3.org/TR/CSS21/selector.html#child-selectors) is probably best to use by default so that nested lists don't increment your counter. For example, `.GreenNumbers > li` would guard against that. – Cameron Hurd Apr 20 '15 at 17:50
The good addition to this is `direction: rtl` for the boolet numbers. – vatavale Jan 21 '20 at 07:25

Adam Davis · Answer 5 · 2009-01-28T19:01:40.470

7

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

edited Jan 28 '09 at 19:01

answered Jan 28 '09 at 18:55

Adam Davis

91,931
60
264
330

This is good if old-browser (IE 6, etc) support is not needed. – cdeszaq Jan 28 '09 at 19:07
1

If the user turns off CSS, it's going to show the number twice, which won't be very good for screen readers. Also, this will only work for single digit numbers. As soon as the list has more than 10 items, only the first digit is going to change colour. – Rich Adams Jan 28 '09 at 19:16
1

This however creates additional content in the HTML which is often not wanted. – Konrad Rudolph Jan 28 '09 at 19:22
The link at the bottom, print.wordpress.com of the post has since gone down, please remove it – revelt Jun 12 '16 at 10:33

score 3 · Answer 6 · edited Aug 13 '15 at 16:55

@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.

score 2 · Answer 7 · answered Jan 28 '09 at 19:20

2

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.

answered Jan 28 '09 at 19:20

notruthless

542
1
6
15

Works in FF68+ Ch80+. – elixon Jan 11 '20 at 16:52

score 0 · Answer 8 · answered Oct 08 '10 at 04:44

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;}

score -1 · Answer 9 · answered Nov 15 '12 at 17:38

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;}

score -1 · Answer 10 · answered Jan 28 '09 at 19:06

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.

score -1 · Answer 11 · answered Dec 08 '20 at 17:02

-1

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.

answered Dec 08 '20 at 17:02

Abiel

9
1

2

OP says: "I do not have access to the HTML" – showdev Dec 08 '20 at 20:37

score -2 · Answer 12 · answered Nov 01 '12 at 14:07

-2

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

answered Nov 01 '12 at 14:07

caiocpricci2

7,714
10
56
88

score -4 · Answer 13 · answered Jan 28 '09 at 19:51

-4

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;}

answered Jan 28 '09 at 19:51

D. Starr

114
1
4

with numbers another color

13 Answers13

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

Linked