Best IT Recipes

<ol> with numbers of a different color

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

will display as:

  • test
  • test

I want to have colored numbers and the text is black!

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

+43
html css html-lists colors
Jan 28 '09 at 18:48
source share
11 answers

The CSS specification gives an example of this. Unfortunately, while it works on Firefox 3, it does not 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>
+89
Jan 28 '09 at 19:35
source share

Not sure if this works, but I think it should:

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

change
If you cannot edit html, I am afraid that this is not possible. If you can add javascript to HTML (once per head), you can do it like this:

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

For this you need the jQuery library.
Then in your CSS just set the red and black class with red / black declarations.

+21
Jan 28 '09 at 18:50
source share

There is a solution here that also wraps text for each element of the list, aligned to the left 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; }
+11
Oct 10 '14 at 12:08
source share

This should do what you are 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; }

In addition, you want to change the color and background to suit your design.

This next one is redundant, but gives you a lot of information on how to create style lists:

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

-Adam

+7
Jan 28 '09 at 18:55
source share

The @kdgregory code worked for me, but it affected my bulleted lists. I changed li to ol li to prevent damage to the marker elements. For example:

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

PS I also prefer to use uppercase letters in CSS for elements like BODY , so I can easily distinguish it from the .body and ids #body .

+2
May 7 '15 at 19:57
source share

From the answer to a similar question, I found elsewhere:

As a side note, CSS3 makes it easy to style list markers using :: Marker pseudo-element.

But for now, it looks like you need to add a <span> to your html.

+1
Jan 28 '09 at 19:20
source share

To talk a bit about what others have said, as well as additional clarifications of the issues, there is no built-in way to do this from CSS without touching HTML. If you want the HTML to be as clean and semantic as possible, I would make a style using javascript, possibly using the jQuery library, to set up the DOM so that css can be more efficient.

I would caution, however, to use color to convey information. I'm not sure what the purpose of colored numbers is, but using color to display information leaves blinding users outside the loop and is great, not for accessibility.

0
Jan 28 '09 at 19:06
source share

too bad you cannot edit html ... what 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;}
0
08 Oct 2018-10-10T00:
source share

It's a little late for this, but I want to share it with the community, it took a long time to do this. I found a solution to change the background and color of the OL numbers that work in every browser. An additional tag is required inside li .

Look here

0
Nov 01
source share

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;}
0
Nov 15 '12 at 17:38
source share

This is easy if you do not want to assign different colors to different numbers of list items. No HTML changes required. It may not work in 100% of browsers, though ..

 ol {color:red;} ol li {color:black;}
-3
Jan 28 '09 at 19:51
source share


More articles:


All Articles