<ol> with numbers another color

Asked 28/1, 2009 at 18:48 Answered 14/1, 2021 at 22:2

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

Aquiver answered 28/1, 2009 at 18:48 Comment(0)

125

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>

Backspace answered 28/1, 2009 at 19:35 Comment(4)

My only beef with the solution above is that any <li> items inside of a <ul> are now 1. instead of a bullet. – Hardtack 12/8, 2015 at 16:46

@MartynChamberlin in a real-world implementation you would use selectors to specify where this styling should be applied. – Backspace 15/8, 2015 at 11:22

@Backspace 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... – Hardtack 16/8, 2015 at 13:38

@MartynChamberlin @Backspace 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. – Pyramidal 24/10, 2017 at 6:22

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

Eubank answered 14/1, 2021 at 22:2 Comment(2)

Wow, didn't think this would work with such complicated answers around it. Thank you for this simple answer. – Spherical 25/1, 2021 at 16:53

This should be changed to the correct answer, as per 2021. – Theoretics 18/8, 2021 at 22:21

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.

Barnstorm answered 28/1, 2009 at 18:50 Comment(2)

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

Inline styles was just to show how to do it, you should of course use classes as I do in the javascript example. – Barnstorm 28/1, 2009 at 20:9

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

Torey answered 10/10, 2014 at 12:8 Comment(3)

This is the cleanest answer here! The css counter() has 97% support, too. Spot on. – Gibbosity 14/4, 2015 at 10:57

It's worth noting, however, that the direct-descendant selector is probably best to use by default so that nested lists don't increment your counter. For example, .GreenNumbers > li would guard against that. – Gibbosity 20/4, 2015 at 17:50

The good addition to this is direction: rtl for the boolet numbers. – Torgerson 21/1, 2020 at 7:25

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

Bloc answered 28/1, 2009 at 18:55 Comment(4)

This is good if old-browser (IE 6, etc) support is not needed. – Estivation 28/1, 2009 at 19:7

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. – Handicraft 28/1, 2009 at 19:16

This however creates additional content in the HTML which is often not wanted. – Hine 28/1, 2009 at 19:22

The link at the bottom, print.wordpress.com of the post has since gone down, please remove it – Iliad 12/6, 2016 at 10:33

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

Keratosis answered 7/5, 2015 at 19:57 Comment(0)

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.

Understand answered 28/1, 2009 at 19:20 Comment(1)

Works in FF68+ Ch80+. – Boondocks 11/1, 2020 at 16:52

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

Uriisa answered 8/10, 2010 at 4:44 Comment(0)

-1

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.

Estivation answered 28/1, 2009 at 19:6 Comment(0)

-1

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

Dearden answered 15/11, 2012 at 17:38 Comment(1)

<li> tag was creted especially for numbering, so disabling it - is the same, as put all items in <p> tag instead – Slalom 30/4, 2015 at 4:44

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

Photocompose answered 8/12, 2020 at 17:2 Comment(1)

OP says: "I do not have access to the HTML" – Lasser 8/12, 2020 at 20:37

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

Grider answered 28/1, 2009 at 19:51 Comment(0)

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++

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

Recommended topics

Hot tags